diff --git a/src/components/project/index.jsx b/src/components/project/index.jsx new file mode 100644 index 0000000..42ca401 --- /dev/null +++ b/src/components/project/index.jsx @@ -0,0 +1,179 @@ +import { Fragment, useContext } from 'react'; +import { AiOutlineStar, AiOutlineFork } from 'react-icons/ai'; +import PropTypes from 'prop-types'; +import { LoadingContext } from '../../contexts/LoadingContext'; +import config from '../../ezprofile.config'; +import { ga, languageColor, skeleton } from '../../helpers/utils'; + +const Project = (props) => { + const [loading] = useContext(LoadingContext); + + const renderSkeleton = () => { + let array = []; + for (let index = 0; index < config.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 props.repo.map((item, index) => ( +
{ + try { + if (config.googleAnalytics?.id) { + ga.event({ + action: 'Click project', + params: { + project: item.name, + }, + }); + } + } catch (error) { + console.error(error); + } + + 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 || !props.repo ? renderSkeleton() : renderProjects()} +
+
+
+
+ + ); +}; + +Project.propTypes = { + repo: PropTypes.array, +}; + +export default Project;