import { Fragment } from 'react'; import { AiOutlineStar, AiOutlineFork } from 'react-icons/ai'; import PropTypes from 'prop-types'; import { ga, languageColor, skeleton } from '../../helpers/utils'; const Project = ({ repo, loading, github, googleAnalytics }) => { const renderSkeleton = () => { let array = []; for (let index = 0; index < github.limit; index++) { array.push(
{skeleton({ width: 'w-32', height: 'h-8' })}
{skeleton({ width: 'w-full', height: 'h-4', className: 'mb-2', })} {skeleton({ width: 'w-full', height: 'h-4' })}
{skeleton({ width: 'w-12', height: 'h-4' })} {skeleton({ width: 'w-12', height: 'h-4' })}
{skeleton({ width: 'w-12', height: 'h-4' })}
); } return array; }; const renderProjects = () => { return repo.map((item, index) => ( { e.preventDefault(); try { if (googleAnalytics?.id) { ga.event({ action: 'Click project', params: { project: item.name, }, }); } } catch (error) { console.error(error); } typeof window !== 'undefined' && window.open(item.html_url, '_blank'); }} >
{item.name}

{item.description}

{item.stargazers_count} {item.forks_count}
{item.language}
)); }; return (
{loading ? ( skeleton({ width: 'w-28', height: 'h-8' }) ) : ( My Projects )}
{loading ? ( skeleton({ width: 'w-10', height: 'h-5' }) ) : ( See All )}
{loading || !repo ? renderSkeleton() : renderProjects()}
); }; Project.propTypes = { repo: PropTypes.array, loading: PropTypes.bool.isRequired, github: PropTypes.object.isRequired, googleAnalytics: PropTypes.object.isRequired, }; export default Project;