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

Display projects

Browse Source
This commit is contained in:
MD. Ariful Alam
2021-08-23 21:33:35 +06:00
parent 29da6b59a9
commit 09390be420
8 changed files with 1619 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Education.js
View File

@@ -16,7 +16,7 @@ const Education = () => {
<div className="font-medium">
{skeleton({ width: 'w-48', height: 'h-4', className: "mb-2" })}
</div>
<div className="opacity-80">
<div className="opacity-90">
{skeleton({ width: 'w-32', height: 'h-4', className: "mb-2" })}
</div>
</div>
@@ -54,7 +54,7 @@ const Education = () => {
<div className="font-medium">
{item.institution}
</div>
<div className="opacity-80">
<div className="opacity-90">
{item.from} - {item.to}
</div>
</div>

4
src/components/Experience.js
View File

@@ -16,7 +16,7 @@ const Experience = () => {
<div className="font-medium">
{skeleton({ width: 'w-48', height: 'h-4', className: "mb-2" })}
</div>
<div className="opacity-80">
<div className="opacity-90">
{skeleton({ width: 'w-32', height: 'h-4', className: "mb-2" })}
</div>
</div>
@@ -54,7 +54,7 @@ const Experience = () => {
<div className="font-medium">
{experience.company}
</div>
<div className="opacity-80">
<div className="opacity-90">
{experience.from} - {experience.to}
</div>
</div>

92
src/components/Project.js
View File

@@ -1,7 +1,7 @@
import { Fragment } from "react";
import { useSelector } from "react-redux";
import { skeleton } from "../helpers/utils";
import { FiChevronsDown } from 'react-icons/fi';
import { languageColor, skeleton } from "../helpers/utils";
import { AiFillStar, AiOutlineFork } from 'react-icons/ai';
const LIMIT = 8;
@@ -9,28 +9,86 @@ const Project = () => {
const loading = useSelector(state => state.loading);
const repo = useSelector(state => state.repo);
const renderProjects = () => {
if (loading) {
} else {
return repo.slice(0, LIMIT).map((project, index) => (
const renderSkeleton = () => {
let array = [];
for (let index = 0; index < LIMIT; index++) {
array.push((
<div className="card shadow-lg compact side bg-base-100" key={index}>
<div className="flex justify-between flex-col p-8">
<div className="flex justify-between flex-col p-8 h-full w-full">
<div>
<div className="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-5 h-5 mr-2 stroke-current"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path></svg>
<span>{project.name}</span>
<div className="flex items-center opacity-60">
<span>
<h5 className="card-title">
{skeleton({width: 'w-32', height: 'h-8'})}
</h5>
</span>
</div>
<p className="mb-8">{project.description}</p>
<span className="mb-5 mt-1 text-base-content text-opacity-40 text-sm">
{skeleton({width: 'w-full', height: 'h-4', className: 'mb-2'})}
{skeleton({width: 'w-full', height: 'h-4'})}
</span>
</div>
<div>
Stats
<div className="flex justify-between text-sm text-base-content text-opacity-40">
<div className="flex flex-grow">
<span className="mr-3 flex items-center">
{skeleton({width: 'w-12', height: 'h-4'})}
</span>
<span className="flex items-center">
{skeleton({width: 'w-12', height: 'h-4'})}
</span>
</div>
<div>
<span className="flex items-center">
{skeleton({width: 'w-12', height: 'h-4'})}
</span>
</div>
</div>
</div>
</div>
));
))
}
return array;
}
const renderProjects = () => {
return repo.slice(0, LIMIT).map((item, index) => (
<a href={item.html_url} target="_blank" rel="noreferrer" className="card shadow-lg compact side bg-base-100" key={index}>
<div className="flex justify-between flex-col p-8 h-full w-full">
<div>
<div className="flex items-center opacity-60">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-5 h-5 mr-2 stroke-current"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path></svg>
<span>
<h5 className="card-title">
{item.name}
</h5>
</span>
</div>
<p className="mb-5 mt-1 text-base-content text-opacity-40 text-sm">
{item.description}
</p>
</div>
<div className="flex justify-between text-sm text-base-content text-opacity-40">
<div className="flex flex-grow">
<span className="mr-3 flex items-center">
<AiFillStar/>
<span>{item.stargazers_count}</span>
</span>
<span className="flex items-center">
<AiOutlineFork/>
<span>{item.forks_count}</span>
</span>
</div>
<div>
<span className="flex items-center">
<div className="w-3 h-3 rounded-full mr-1 opacity-75" style={{backgroundColor: languageColor(item.language)}}/>
<span>{item.language}</span>
</span>
</div>
</div>
</div>
</a>
));
}
return (
@@ -61,7 +119,7 @@ const Project = () => {
</div> */}
<div className="col-span-2">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{renderProjects()}
{(loading || !repo) ? renderSkeleton() : renderProjects()}
</div>
</div>
</div>