From aaf7e4a8cfb5d3b5c4aea308412b6a37e08064e6 Mon Sep 17 00:00:00 2001 From: Ariful Alam Date: Sat, 19 Mar 2022 00:52:23 +0600 Subject: [PATCH] Create Details component --- src/components/details/index.jsx | 295 +++++++++++++++++++++++++++++++ 1 file changed, 295 insertions(+) create mode 100644 src/components/details/index.jsx 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 && ( +
    • + +
      + +
      + +       +
      • + )} + + )} +
    +
    +
    + ); +}; + +Details.propTypes = { + profile: PropTypes.object, +}; + +export default Details;