noham/gitprofile
1
0
Fork 0
mirror of https://github.com/NohamR/gitprofile.git synced 2026-05-25 20:00:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update skeleton style of details

Browse Source
This commit is contained in:
Ariful Alam
2022-03-19 17:41:03 +06:00
parent ee36b5c49c
commit 1565307200
1 changed files with 128 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

253
src/components/details/index.jsx
View File

@@ -4,6 +4,7 @@ import { SiTwitter } from 'react-icons/si';
import { GrLinkedinOption } from 'react-icons/gr'; import { GrLinkedinOption } from 'react-icons/gr';
import { CgDribbble } from 'react-icons/cg'; import { CgDribbble } from 'react-icons/cg';
import { RiPhoneFill } from 'react-icons/ri'; import { RiPhoneFill } from 'react-icons/ri';
import { Fragment } from 'react';
import { import {
FaBehanceSquare, FaBehanceSquare,
FaBuilding, FaBuilding,
@@ -15,15 +16,15 @@ import PropTypes from 'prop-types';
import { skeleton } from '../../helpers/utils'; import { skeleton } from '../../helpers/utils';
import config from '../../ezprofile.config'; import config from '../../ezprofile.config';
const ListItem = ({ icon, title, value, link }) => { const ListItem = ({ icon, title, value, link, skeleton = false }) => {
return ( return (
<div class="flex justify-start py-2 px-1 items-center"> <div class="flex justify-start py-2 px-1 items-center">
<span class="w-2 m-2">{icon}</span> <span class="w-2 m-2">{icon}</span>
<div class="flex-grow font-medium px-2">{title}:</div> <div class="flex-grow font-medium px-2">{title}</div>
<div <div
class={`text-sm font-normal text-right mr-2 ml-3 ${ class={`${
link ? 'truncate' : '' skeleton ? 'flex-grow' : ''
}`} } text-sm font-normal text-right mr-2 ml-3 ${link ? 'truncate' : ''}`}
> >
<a <a
href={link} href={link}
@@ -45,12 +46,12 @@ const Details = ({ profile, loading }) => {
let array = []; let array = [];
for (let index = 0; index < 4; index++) { for (let index = 0; index < 4; index++) {
array.push( array.push(
<li key={index}> <ListItem
<span> skeleton={true}
{skeleton({ width: 'w-6', height: 'h-4', className: 'mr-2' })} icon={skeleton({ width: 'w-4', height: 'h-4' })}
{skeleton({ width: 'w-32', height: 'h-4' })} title={skeleton({ width: 'w-24', height: 'h-4' })}
</span> value={skeleton({ width: 'w-full', height: 'h-4' })}
</li> />
); );
} }
@@ -60,122 +61,124 @@ const Details = ({ profile, loading }) => {
return ( return (
<div className="card shadow-lg compact bg-base-100"> <div className="card shadow-lg compact bg-base-100">
<div className="card-body"> <div className="card-body">
{loading || !profile ? ( <div className="bg-base-100 text-base-content text-opacity-60">
renderSkeleton() {loading || !profile ? (
) : ( renderSkeleton()
<div className="bg-base-100 text-base-content text-opacity-60"> ) : (
{profile.location && ( <Fragment>
{profile.location && (
<ListItem
icon={<MdLocationOn className="mr-2" />}
title="Based on:"
value={profile.location}
/>
)}
{profile.company && (
<ListItem
icon={<FaBuilding className="mr-2" />}
title="Company:"
value={profile.company}
/>
)}
<ListItem <ListItem
icon={<MdLocationOn className="mr-2" />} icon={<AiFillGithub className="mr-2" />}
title="Based on" title="GitHub:"
value={profile.location} value={config.github.username}
link={`https://github.com/${config.github.username}`}
/> />
)} {typeof config.social.twitter !== 'undefined' &&
{profile.company && ( config.social.twitter && (
<ListItem <ListItem
icon={<FaBuilding className="mr-2" />} icon={<SiTwitter className="mr-2" />}
title="Company" title="Twitter:"
value={profile.company} value={config.social.twitter}
/> link={`https://twitter.com/${config.social.twitter}`}
)} />
<ListItem )}
icon={<AiFillGithub className="mr-2" />} {typeof config.social.linkedin !== 'undefined' &&
title="GitHub" config.social.linkedin && (
value={config.github.username} <ListItem
link={`https://github.com/${config.github.username}`} icon={<GrLinkedinOption className="mr-2" />}
/> title="LinkedIn:"
{typeof config.social.twitter !== 'undefined' && value={config.social.linkedin}
config.social.twitter && ( link={`https://www.linkedin.com/in/${config.social.linkedin}`}
<ListItem />
icon={<SiTwitter className="mr-2" />} )}
title="Twitter" {typeof config.social.dribbble !== 'undefined' &&
value={config.social.twitter} config.social.dribbble && (
link={`https://twitter.com/${config.social.twitter}`} <ListItem
/> icon={<CgDribbble className="mr-2" />}
)} title="Dribbble:"
{typeof config.social.linkedin !== 'undefined' && value={config.social.dribbble}
config.social.linkedin && ( link={`https://dribbble.com/${config.social.dribbble}`}
<ListItem />
icon={<GrLinkedinOption className="mr-2" />} )}
title="LinkedIn" {typeof config.social.behance !== 'undefined' &&
value={config.social.linkedin} config.social.behance && (
link={`https://www.linkedin.com/in/${config.social.linkedin}`} <ListItem
/> icon={<FaBehanceSquare className="mr-2" />}
)} title="Behance:"
{typeof config.social.dribbble !== 'undefined' && value={config.social.behance}
config.social.dribbble && ( link={`https://www.behance.net/${config.social.behance}`}
<ListItem />
icon={<CgDribbble className="mr-2" />} )}
title="Dribbble" {typeof config.social.facebook !== 'undefined' &&
value={config.social.dribbble} config.social.facebook && (
link={`https://dribbble.com/${config.social.dribbble}`} <ListItem
/> icon={<FaFacebook className="mr-2" />}
)} title="Facebook:"
{typeof config.social.behance !== 'undefined' && value={config.social.facebook}
config.social.behance && ( link={`https://www.facebook.com/${config.social.facebook}`}
<ListItem />
icon={<FaBehanceSquare className="mr-2" />} )}
title="Behance" {typeof config.social.medium !== 'undefined' &&
value={config.social.behance} config.social.medium && (
link={`https://www.behance.net/${config.social.behance}`} <ListItem
/> icon={<AiFillMediumSquare className="mr-2" />}
)} title="Medium:"
{typeof config.social.facebook !== 'undefined' && value={config.social.medium}
config.social.facebook && ( link={`https://medium.com/@${config.social.medium}`}
<ListItem />
icon={<FaFacebook className="mr-2" />} )}
title="Facebook" {typeof config.social.devto !== 'undefined' &&
value={config.social.facebook} config.social.devto && (
link={`https://www.facebook.com/${config.social.facebook}`} <ListItem
/> icon={<FaDev className="mr-2" />}
)} title="Dev:"
{typeof config.social.medium !== 'undefined' && value={config.social.devto}
config.social.medium && ( link={`https://dev.to/${config.social.devto}`}
<ListItem />
icon={<AiFillMediumSquare className="mr-2" />} )}
title="Medium" {typeof config.social.website !== 'undefined' &&
value={config.social.medium} config.social.website && (
link={`https://medium.com/@${config.social.medium}`} <ListItem
/> icon={<FaGlobe className="mr-2" />}
)} title="Website:"
{typeof config.social.devto !== 'undefined' && value={config.social.website}
config.social.devto && ( link={config.social.website}
<ListItem />
icon={<FaDev className="mr-2" />} )}
title="Dev" {typeof config.social.phone !== 'undefined' &&
value={config.social.devto} config.social.phone && (
link={`https://dev.to/${config.social.devto}`} <ListItem
/> icon={<RiPhoneFill className="mr-2" />}
)} title="Phone:"
{typeof config.social.website !== 'undefined' && value={config.social.phone}
config.social.website && ( link={`tel:${config.social.phone}`}
<ListItem />
icon={<FaGlobe className="mr-2" />} )}
title="Website" {typeof config.social.email !== 'undefined' &&
value={config.social.website} config.social.email && (
link={config.social.website} <ListItem
/> icon={<MdMail className="mr-2" />}
)} title="Email:"
{typeof config.social.phone !== 'undefined' && value={config.social.email}
config.social.phone && ( link={`mailto:${config.social.email}`}
<ListItem />
icon={<RiPhoneFill className="mr-2" />} )}
title="Phone" </Fragment>
value={config.social.phone} )}
link={`tel:${config.social.phone}`} </div>
/>
)}
{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}`}
/>
)}
</div>
)}
</div> </div>
</div> </div>
); );