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

Refactor style

Browse Source
This commit is contained in:
MD. Ariful Alam
2021-08-25 02:48:30 +06:00
parent fac3686168
commit a317e716c5
5 changed files with 118 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.js
View File

@@ -92,7 +92,7 @@ function App() {
}, [dispatch]) }, [dispatch])
useEffect(() => { useEffect(() => {
// loadData(); loadData();
}, [loadData]) }, [loadData])
return ( return (

118
src/components/Blog.js
View File

@@ -2,11 +2,14 @@ import { getDevtoArticle, getMediumArticle } from "article-api";
import moment from "moment"; import moment from "moment";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { CgHashtag } from 'react-icons/cg'; import { CgHashtag } from 'react-icons/cg';
import { useSelector } from "react-redux";
import config from "../config"; import config from "../config";
import { skeleton } from "../helpers/utils"; import { skeleton } from "../helpers/utils";
import LazyImage from "./LazyImage";
const Blog = () => { const Blog = () => {
const [articles, setArticles] = useState(null); const [articles, setArticles] = useState(null);
const loading = useSelector(state => state.loading);
useEffect(() => { useEffect(() => {
if ( if (
@@ -34,56 +37,84 @@ const Blog = () => {
} }
}, []) }, [])
return ( const renderSkeleton = () => {
<div className="col-span-1 lg:col-span-2"> let array = [];
<div className="grid grid-cols-2 gap-6"> for (let index = 0; index < 2; index++) {
<div className="col-span-2"> array.push((
<div className="card compact bg-base-100 shadow-sm"> <div className="card shadow-lg compact bg-base-100" key={index}>
<div className="card-body"> <div className="p-8 h-full w-full">
<ul className="menu row-span-3 bg-base-100 text-base-content text-opacity-40"> <div className="flex items-center flex-col md:flex-row">
<li> <div className="avatar mb-5 md:mb-0">
<div className="section-title pb-0-important mx-5 flex items-center"> <div className="w-24 h-24 mask mask-squircle">
<h5 className="card-title mr-3">
{!articles ? skeleton({width: 'w-28', height: 'h-8'}) : 'Recent Posts'}
</h5>
{ {
!articles ? skeleton({width: 'w-8', height: 'h-8'}) : ( skeleton({
<svg className="animate-bounce w-4 h-4" fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" stroke="currentColor"> width: 'w-full',
<path d="M19 14l-7 7m0 0l-7-7m7 7V3"></path> height: 'h-full',
</svg> shape: '',
) })
} }
</div> </div>
</li> </div>
</ul> <div className="w-full">
<div className="flex items-start px-4">
<div className="w-full">
<h2>
{skeleton({ width: 'w-48', height: 'h-8', className: 'mb-2 mx-auto md:mx-0' })}
</h2>
{skeleton({ width: 'w-24', height: 'h-3', className: 'mx-auto md:mx-0' })}
<div className="mt-3">
{skeleton({ width: 'w-full', height: 'h-4', className: 'mx-auto md:mx-0' })}
</div>
<div className="mt-4 flex items-center flex-wrap justify-center md:justify-start">
{skeleton({ width: 'w-32', height: 'h-4', className: "md:mr-2 mx-auto md:mx-0" })}
</div> </div>
</div> </div>
</div> </div>
<div className="col-span-2"> </div>
<div className="grid grid-cols-1 gap-6"> </div>
{ </div>
articles && articles.slice(0, 5).map((article, index) => ( </div>
))
}
return array;
}
const renderArticles = () => {
return articles && articles.slice(0, 5).map((article, index) => (
<a href={article.link} target="_blank" rel="noreferrer" className="card shadow-lg compact bg-base-100" key={index}> <a href={article.link} target="_blank" rel="noreferrer" className="card shadow-lg compact bg-base-100" key={index}>
<div className="p-8 h-full w-full"> <div className="p-8 h-full w-full">
<div className="flex items-center flex-col md:flex-row"> <div className="flex items-center flex-col md:flex-row">
<div className="avatar mb-5 md:mb-0"> <div className="avatar mb-5 md:mb-0">
<div className="w-24 h-24 mask mask-squircle"> <div className="w-24 h-24 mask mask-squircle">
<img src={article.thumbnail} alt={'thumbnail'}/> <LazyImage
src={article.thumbnail}
alt={'thumbnail'}
placeholder={
skeleton({
width: 'w-full',
height: 'h-full',
shape: '',
})
}
/>
</div> </div>
</div> </div>
<div className="w-full"> <div className="w-full">
<div className="flex items-start px-4"> <div className="flex items-start px-4">
<div className="text-center md:text-left"> <div className="text-center md:text-left w-full">
<h2 className="text-lg font-semibold text-gray-900 -mt-1">{article.title}</h2> <h2 className="text-lg font-semibold text-base-content opacity-60">{article.title}</h2>
<p className="text-gray-700">{moment(article.publishedAt).fromNow()}</p> <p className="opacity-50 text-xs">
<p className="mt-3 text-gray-700 text-sm"> {moment(article.publishedAt).fromNow()}
</p>
<p className="mt-3 text-base-content text-opacity-60 text-sm">
{article.description} {article.description}
</p> </p>
<div className="mt-4 flex items-center flex-wrap justify-center md:justify-start"> <div className="mt-4 flex items-center flex-wrap justify-center md:justify-start">
{ {
article.categories.map((category, index2) => ( article.categories.map((category, index2) => (
<div key={index2} className="flex text-gray-700 text-sm mr-3 items-center"> <div key={index2} className="flex text-sm mr-3 items-center opacity-50 font-bold font-mono">
<CgHashtag/> <CgHashtag />
<span>{category}</span> <span>{category}</span>
</div> </div>
)) ))
@@ -95,9 +126,34 @@ const Blog = () => {
</div> </div>
</div> </div>
</a> </a>
)) ))
} }
return (
<div className="col-span-1 lg:col-span-2">
<div className="grid grid-cols-2 gap-6">
<div className="col-span-2">
<div className="card compact bg-base-100 shadow-sm">
<div className="card-body">
<ul className="menu row-span-3 bg-base-100 text-base-content">
<li>
<div className="pb-0-important mx-4 flex items-center justify-between">
<h5 className="card-title">
{
(loading || !articles) ? skeleton({ width: 'w-28', height: 'h-8' }) : (
<span className="opacity-70">Recent Posts</span>
)
}
</h5>
</div>
</li>
</ul>
</div>
</div>
</div>
<div className="col-span-2">
<div className="grid grid-cols-1 gap-6">
{(loading || !articles) ? renderSkeleton() : renderArticles()}
</div> </div>
</div> </div>
</div> </div>

2
src/components/Education.js
View File

@@ -63,7 +63,7 @@ const Education = () => {
<div className="font-medium opacity-70"> <div className="font-medium opacity-70">
{item.institution} {item.institution}
</div> </div>
<div className="opacity-40"> <div className="opacity-50">
{item.from} - {item.to} {item.from} - {item.to}
</div> </div>
</div> </div>

2
src/components/Experience.js
View File

@@ -61,7 +61,7 @@ const Experience = () => {
<div className="font-medium opacity-70"> <div className="font-medium opacity-70">
{experience.company} {experience.company}
</div> </div>
<div className="opacity-40"> <div className="opacity-50">
{experience.from} - {experience.to} {experience.from} - {experience.to}
</div> </div>
</div> </div>

2
src/components/Project.js
View File

@@ -2,9 +2,7 @@ import { Fragment } from "react";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { languageColor, skeleton } from "../helpers/utils"; import { languageColor, skeleton } from "../helpers/utils";
import { AiFillStar, AiOutlineFork } from 'react-icons/ai'; import { AiFillStar, AiOutlineFork } from 'react-icons/ai';
import { VscSourceControl } from 'react-icons/vsc';
import config from "../config"; import config from "../config";
import { CgGitFork } from "react-icons/cg";
const LIMIT = 8; const LIMIT = 8;