Pass config as props

src/components/details/index.jsx

@@ -14,7 +14,6 @@ import {
 } from 'react-icons/fa';
 import PropTypes from 'prop-types';
 import { skeleton } from '../../helpers/utils';
-import config from '../../../gitprofile.config';
 
 const ListItem = ({ icon, title, value, link, skeleton = false }) => {
   return (
@@ -43,7 +42,7 @@ const ListItem = ({ icon, title, value, link, skeleton = false }) => {
   );
 };
 
-const Details = ({ profile, loading }) => {
+const Details = ({ profile, loading, social, github }) => {
   const renderSkeleton = () => {
     let array = [];
     for (let index = 0; index < 4; index++) {
@@ -86,99 +85,89 @@ const Details = ({ profile, loading }) => {
               <ListItem
                 icon={<AiFillGithub className="mr-2" />}
                 title="GitHub:"
-                value={config.github.username}
-                link={`https://github.com/${config.github.username}`}
+                value={github.username}
+                link={`https://github.com/${github.username}`}
               />
-              {typeof config.social.twitter !== 'undefined' &&
-                config.social.twitter && (
-                  <ListItem
-                    icon={<SiTwitter className="mr-2" />}
-                    title="Twitter:"
-                    value={config.social.twitter}
-                    link={`https://twitter.com/${config.social.twitter}`}
-                  />
-                )}
-              {typeof config.social.linkedin !== 'undefined' &&
-                config.social.linkedin && (
-                  <ListItem
-                    icon={<GrLinkedinOption className="mr-2" />}
-                    title="LinkedIn:"
-                    value={config.social.linkedin}
-                    link={`https://www.linkedin.com/in/${config.social.linkedin}`}
-                  />
-                )}
-              {typeof config.social.dribbble !== 'undefined' &&
-                config.social.dribbble && (
-                  <ListItem
-                    icon={<CgDribbble className="mr-2" />}
-                    title="Dribbble:"
-                    value={config.social.dribbble}
-                    link={`https://dribbble.com/${config.social.dribbble}`}
-                  />
-                )}
-              {typeof config.social.behance !== 'undefined' &&
-                config.social.behance && (
-                  <ListItem
-                    icon={<FaBehanceSquare className="mr-2" />}
-                    title="Behance:"
-                    value={config.social.behance}
-                    link={`https://www.behance.net/${config.social.behance}`}
-                  />
-                )}
-              {typeof config.social.facebook !== 'undefined' &&
-                config.social.facebook && (
-                  <ListItem
-                    icon={<FaFacebook className="mr-2" />}
-                    title="Facebook:"
-                    value={config.social.facebook}
-                    link={`https://www.facebook.com/${config.social.facebook}`}
-                  />
-                )}
-              {typeof config.social.medium !== 'undefined' &&
-                config.social.medium && (
-                  <ListItem
-                    icon={<AiFillMediumSquare className="mr-2" />}
-                    title="Medium:"
-                    value={config.social.medium}
-                    link={`https://medium.com/@${config.social.medium}`}
-                  />
-                )}
-              {typeof config.social.devto !== 'undefined' &&
-                config.social.devto && (
-                  <ListItem
-                    icon={<FaDev className="mr-2" />}
-                    title="Dev:"
-                    value={config.social.devto}
-                    link={`https://dev.to/${config.social.devto}`}
-                  />
-                )}
-              {typeof config.social.website !== 'undefined' &&
-                config.social.website && (
-                  <ListItem
-                    icon={<FaGlobe className="mr-2" />}
-                    title="Website:"
-                    value={config.social.website}
-                    link={config.social.website}
-                  />
-                )}
-              {typeof config.social.phone !== 'undefined' &&
-                config.social.phone && (
-                  <ListItem
-                    icon={<RiPhoneFill className="mr-2" />}
-                    title="Phone:"
-                    value={config.social.phone}
-                    link={`tel:${config.social.phone}`}
-                  />
-                )}
-              {typeof config.social.email !== 'undefined' &&
-                config.social.email && (
-                  <ListItem
-                    icon={<MdMail className="mr-2" />}
-                    title="Email:"
-                    value={config.social.email}
-                    link={`mailto:${config.social.email}`}
-                  />
-                )}
+              {typeof social.twitter !== 'undefined' && social.twitter && (
+                <ListItem
+                  icon={<SiTwitter className="mr-2" />}
+                  title="Twitter:"
+                  value={social.twitter}
+                  link={`https://twitter.com/${social.twitter}`}
+                />
+              )}
+              {typeof social.linkedin !== 'undefined' && social.linkedin && (
+                <ListItem
+                  icon={<GrLinkedinOption className="mr-2" />}
+                  title="LinkedIn:"
+                  value={social.linkedin}
+                  link={`https://www.linkedin.com/in/${social.linkedin}`}
+                />
+              )}
+              {typeof social.dribbble !== 'undefined' && social.dribbble && (
+                <ListItem
+                  icon={<CgDribbble className="mr-2" />}
+                  title="Dribbble:"
+                  value={social.dribbble}
+                  link={`https://dribbble.com/${social.dribbble}`}
+                />
+              )}
+              {typeof social.behance !== 'undefined' && social.behance && (
+                <ListItem
+                  icon={<FaBehanceSquare className="mr-2" />}
+                  title="Behance:"
+                  value={social.behance}
+                  link={`https://www.behance.net/${social.behance}`}
+                />
+              )}
+              {typeof social.facebook !== 'undefined' && social.facebook && (
+                <ListItem
+                  icon={<FaFacebook className="mr-2" />}
+                  title="Facebook:"
+                  value={social.facebook}
+                  link={`https://www.facebook.com/${social.facebook}`}
+                />
+              )}
+              {typeof social.medium !== 'undefined' && social.medium && (
+                <ListItem
+                  icon={<AiFillMediumSquare className="mr-2" />}
+                  title="Medium:"
+                  value={social.medium}
+                  link={`https://medium.com/@${social.medium}`}
+                />
+              )}
+              {typeof social.devto !== 'undefined' && social.devto && (
+                <ListItem
+                  icon={<FaDev className="mr-2" />}
+                  title="Dev:"
+                  value={social.devto}
+                  link={`https://dev.to/${social.devto}`}
+                />
+              )}
+              {typeof social.website !== 'undefined' && social.website && (
+                <ListItem
+                  icon={<FaGlobe className="mr-2" />}
+                  title="Website:"
+                  value={social.website}
+                  link={social.website}
+                />
+              )}
+              {typeof social.phone !== 'undefined' && social.phone && (
+                <ListItem
+                  icon={<RiPhoneFill className="mr-2" />}
+                  title="Phone:"
+                  value={social.phone}
+                  link={`tel:${social.phone}`}
+                />
+              )}
+              {typeof social.email !== 'undefined' && social.email && (
+                <ListItem
+                  icon={<MdMail className="mr-2" />}
+                  title="Email:"
+                  value={social.email}
+                  link={`mailto:${social.email}`}
+                />
+              )}
             </Fragment>
           )}
         </div>
@@ -189,7 +178,9 @@ const Details = ({ profile, loading }) => {
 
 Details.propTypes = {
   profile: PropTypes.object,
-  loading: PropTypes.bool,
+  loading: PropTypes.bool.isRequired,
+  social: PropTypes.object.isRequired,
+  github: PropTypes.object.isRequired,
 };
 
 ListItem.propTypes = {