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

55
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,27 +61,28 @@ 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">
<div className="bg-base-100 text-base-content text-opacity-60">
{loading || !profile ? ( {loading || !profile ? (
renderSkeleton() renderSkeleton()
) : ( ) : (
<div className="bg-base-100 text-base-content text-opacity-60"> <Fragment>
{profile.location && ( {profile.location && (
<ListItem <ListItem
icon={<MdLocationOn className="mr-2" />} icon={<MdLocationOn className="mr-2" />}
title="Based on" title="Based on:"
value={profile.location} value={profile.location}
/> />
)} )}
{profile.company && ( {profile.company && (
<ListItem <ListItem
icon={<FaBuilding className="mr-2" />} icon={<FaBuilding className="mr-2" />}
title="Company" title="Company:"
value={profile.company} value={profile.company}
/> />
)} )}
<ListItem <ListItem
icon={<AiFillGithub className="mr-2" />} icon={<AiFillGithub className="mr-2" />}
title="GitHub" title="GitHub:"
value={config.github.username} value={config.github.username}
link={`https://github.com/${config.github.username}`} link={`https://github.com/${config.github.username}`}
/> />
@@ -88,7 +90,7 @@ const Details = ({ profile, loading }) => {
config.social.twitter && ( config.social.twitter && (
<ListItem <ListItem
icon={<SiTwitter className="mr-2" />} icon={<SiTwitter className="mr-2" />}
title="Twitter" title="Twitter:"
value={config.social.twitter} value={config.social.twitter}
link={`https://twitter.com/${config.social.twitter}`} link={`https://twitter.com/${config.social.twitter}`}
/> />
@@ -97,7 +99,7 @@ const Details = ({ profile, loading }) => {
config.social.linkedin && ( config.social.linkedin && (
<ListItem <ListItem
icon={<GrLinkedinOption className="mr-2" />} icon={<GrLinkedinOption className="mr-2" />}
title="LinkedIn" title="LinkedIn:"
value={config.social.linkedin} value={config.social.linkedin}
link={`https://www.linkedin.com/in/${config.social.linkedin}`} link={`https://www.linkedin.com/in/${config.social.linkedin}`}
/> />
@@ -106,7 +108,7 @@ const Details = ({ profile, loading }) => {
config.social.dribbble && ( config.social.dribbble && (
<ListItem <ListItem
icon={<CgDribbble className="mr-2" />} icon={<CgDribbble className="mr-2" />}
title="Dribbble" title="Dribbble:"
value={config.social.dribbble} value={config.social.dribbble}
link={`https://dribbble.com/${config.social.dribbble}`} link={`https://dribbble.com/${config.social.dribbble}`}
/> />
@@ -115,7 +117,7 @@ const Details = ({ profile, loading }) => {
config.social.behance && ( config.social.behance && (
<ListItem <ListItem
icon={<FaBehanceSquare className="mr-2" />} icon={<FaBehanceSquare className="mr-2" />}
title="Behance" title="Behance:"
value={config.social.behance} value={config.social.behance}
link={`https://www.behance.net/${config.social.behance}`} link={`https://www.behance.net/${config.social.behance}`}
/> />
@@ -124,7 +126,7 @@ const Details = ({ profile, loading }) => {
config.social.facebook && ( config.social.facebook && (
<ListItem <ListItem
icon={<FaFacebook className="mr-2" />} icon={<FaFacebook className="mr-2" />}
title="Facebook" title="Facebook:"
value={config.social.facebook} value={config.social.facebook}
link={`https://www.facebook.com/${config.social.facebook}`} link={`https://www.facebook.com/${config.social.facebook}`}
/> />
@@ -133,7 +135,7 @@ const Details = ({ profile, loading }) => {
config.social.medium && ( config.social.medium && (
<ListItem <ListItem
icon={<AiFillMediumSquare className="mr-2" />} icon={<AiFillMediumSquare className="mr-2" />}
title="Medium" title="Medium:"
value={config.social.medium} value={config.social.medium}
link={`https://medium.com/@${config.social.medium}`} link={`https://medium.com/@${config.social.medium}`}
/> />
@@ -142,7 +144,7 @@ const Details = ({ profile, loading }) => {
config.social.devto && ( config.social.devto && (
<ListItem <ListItem
icon={<FaDev className="mr-2" />} icon={<FaDev className="mr-2" />}
title="Dev" title="Dev:"
value={config.social.devto} value={config.social.devto}
link={`https://dev.to/${config.social.devto}`} link={`https://dev.to/${config.social.devto}`}
/> />
@@ -151,7 +153,7 @@ const Details = ({ profile, loading }) => {
config.social.website && ( config.social.website && (
<ListItem <ListItem
icon={<FaGlobe className="mr-2" />} icon={<FaGlobe className="mr-2" />}
title="Website" title="Website:"
value={config.social.website} value={config.social.website}
link={config.social.website} link={config.social.website}
/> />
@@ -160,7 +162,7 @@ const Details = ({ profile, loading }) => {
config.social.phone && ( config.social.phone && (
<ListItem <ListItem
icon={<RiPhoneFill className="mr-2" />} icon={<RiPhoneFill className="mr-2" />}
title="Phone" title="Phone:"
value={config.social.phone} value={config.social.phone}
link={`tel:${config.social.phone}`} link={`tel:${config.social.phone}`}
/> />
@@ -169,15 +171,16 @@ const Details = ({ profile, loading }) => {
config.social.email && ( config.social.email && (
<ListItem <ListItem
icon={<MdMail className="mr-2" />} icon={<MdMail className="mr-2" />}
title="Email" title="Email:"
value={config.social.email} value={config.social.email}
link={`mailto:${config.social.email}`} link={`mailto:${config.social.email}`}
/> />
)} )}
</div> </Fragment>
)} )}
</div> </div>
</div> </div>
</div>
); );
}; };