diff --git a/src/components/details/index.jsx b/src/components/details/index.jsx
new file mode 100644
index 0000000..4d0f300
--- /dev/null
+++ b/src/components/details/index.jsx
@@ -0,0 +1,295 @@
+import { MdLocationOn, MdMail } from 'react-icons/md';
+import { AiFillGithub, AiFillMediumSquare } from 'react-icons/ai';
+import { SiTwitter } from 'react-icons/si';
+import { GrLinkedinOption } from 'react-icons/gr';
+import { CgDribbble } from 'react-icons/cg';
+import { RiPhoneFill } from 'react-icons/ri';
+import {
+ FaBehanceSquare,
+ FaBuilding,
+ FaDev,
+ FaFacebook,
+ FaGlobe,
+} from 'react-icons/fa';
+import PropTypes from 'prop-types';
+import { useContext } from 'react';
+import { LoadingContext } from '../../contexts/LoadingContext';
+import { skeleton } from '../../helpers/utils';
+import config from '../../ezprofile.config';
+
+const Details = (props) => {
+ const [loading] = useContext(LoadingContext);
+
+ const renderSkeleton = () => {
+ let array = [];
+ for (let index = 0; index < 4; index++) {
+ array.push(
+
+
+ {skeleton({ width: 'w-6', height: 'h-4', className: 'mr-2' })}
+ {skeleton({ width: 'w-32', height: 'h-4' })}
+
+
+ );
+ }
+
+ return array;
+ };
+
+ return (
+
+
+
+ {loading || !props.profile ? (
+ renderSkeleton()
+ ) : (
+ <>
+ {props.profile.location && (
+ -
+
+
+
+
+ {props.profile.location}
+
+
+ )}
+ {props.profile.company && (
+ -
+
+
+
+
+ {props.profile.company}
+
+
+ )}
+ -
+
+
+
+
+
+ {typeof config.social.linkedin !== 'undefined' &&
+ config.social.linkedin && (
+ -
+
+
+
+
+
+
+
+ )}
+ {typeof config.social.twitter !== 'undefined' &&
+ config.social.twitter && (
+ -
+
+
+
+
+
+
+
+ )}
+ {typeof config.social.dribbble !== 'undefined' &&
+ config.social.dribbble && (
+ -
+
+
+
+
+
+
+
+ )}
+ {typeof config.social.behance !== 'undefined' &&
+ config.social.behance && (
+ -
+
+
+
+
+
+
+
+ )}
+ {typeof config.social.facebook !== 'undefined' &&
+ config.social.facebook && (
+ -
+
+
+
+
+
+
+
+ )}
+ {typeof config.social.medium !== 'undefined' &&
+ config.social.medium && (
+ -
+
+
+
+
+
+ )}
+ {typeof config.social.devto !== 'undefined' &&
+ config.social.devto && (
+ -
+
+
+
+
+
+
+
+ )}
+ {typeof config.social.website !== 'undefined' &&
+ config.social.website && (
+ -
+
+
+
+
+
+
+
+ )}
+ {typeof config.social.phone !== 'undefined' &&
+ config.social.phone && (
+ -
+
+
+
+
+
+
+
+ )}
+ {typeof config.social.email !== 'undefined' &&
+ config.social.email && (
+ -
+
+
+
+
+
+
+
+ )}
+
+ )}
+
+
+