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

Refactor codes

Browse Source
This commit is contained in:
MD. Ariful Alam
2021-08-24 13:22:43 +06:00
parent 3b48d147d1
commit 9bf4c1fd38
9 changed files with 70 additions and 356 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/components/Blog.js
View File

@@ -1,6 +1,6 @@
import { getDevtoArticle, getMediumArticle } from "article-api";
import moment from "moment";
import { Fragment, memo, useEffect, useState } from "react";
import { memo, useEffect, useState } from "react";
import { CgHashtag } from 'react-icons/cg';
import config from "../config";
import { skeleton } from "../helpers/utils";
@@ -35,7 +35,6 @@ const Blog = () => {
}, [])
return (
<>
<div className="col-span-1 lg:col-span-2">
<div className="grid grid-cols-2 gap-6">
<div className="col-span-2">
@@ -65,25 +64,25 @@ const Blog = () => {
{
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}>
<div class="p-8 h-full w-full">
<a class="flex items-center flex-col md:flex-row" href={article.link} target="_blank">
<div class="avatar mb-5 md:mb-0">
<div class="w-24 h-24 mask mask-squircle">
<img src={article.thumbnail} />
<div className="p-8 h-full w-full">
<div className="flex items-center flex-col md:flex-row">
<div className="avatar mb-5 md:mb-0">
<div className="w-24 h-24 mask mask-squircle">
<img src={article.thumbnail} alt={'thumbnail'}/>
</div>
</div>
<div className="w-full">
<div class="flex items-start px-4">
<div class="text-center md:text-left">
<h2 class="text-lg font-semibold text-gray-900 -mt-1">{article.title}</h2>
<p class="text-gray-700">{moment(article.publishedAt).fromNow()}</p>
<p class="mt-3 text-gray-700 text-sm">
<div className="flex items-start px-4">
<div className="text-center md:text-left">
<h2 className="text-lg font-semibold text-gray-900 -mt-1">{article.title}</h2>
<p className="text-gray-700">{moment(article.publishedAt).fromNow()}</p>
<p className="mt-3 text-gray-700 text-sm">
{article.description}
</p>
<div class="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) => (
<div class="flex text-gray-700 text-sm mr-3 items-center">
<div key={index2} className="flex text-gray-700 text-sm mr-3 items-center">
<CgHashtag/>
<span>{category}</span>
</div>
@@ -93,7 +92,7 @@ const Blog = () => {
</div>
</div>
</div>
</a>
</div>
</div>
</a>
@@ -103,60 +102,6 @@ const Blog = () => {
</div>
</div>
</div>
{/* <div className="card shadow-lg compact bg-base-100 col-span-1 lg:col-span-2">
<div className="flex flex-col p-8 h-full w-full">
<div className="mb-2">
<div className="opacity-60">
<span>
<h5 className="card-title">
Recent Posts
</h5>
</span>
</div>
</div>
<div className="grid grid-cols-1 gap-6">
{
articles && articles.slice(0, 5).map((article, index) => (
<div class="card">
<div class="card-body">
<a class="flex items-center flex-col md:flex-row" href={article.link} target="_blank">
<div class="avatar">
<div class="w-24 h-24 mask mask-squircle">
<img src={article.thumbnail} />
</div>
</div>
<div className="w-full">
<div class="flex items-start px-4">
<div class="">
<div class="flex items-center justify-between">
<h2 class="text-lg font-semibold text-gray-900 -mt-1">{article.title}</h2>
</div>
<p class="text-gray-700">{moment(article.publishedAt).fromNow()}</p>
<p class="mt-3 text-gray-700 text-sm">
{article.description}
</p>
<div class="mt-4 flex items-center">
{
article.categories.map((category, index2) => (
<div class="flex text-gray-700 text-sm mr-3">
# {category}
</div>
))
}
</div>
</div>
</div>
</div>
</a>
</div>
</div>
))
}
</div>
</div>
</div> */}
</>
)
}