Skip to content

Commit a9f336b

Browse files
nmayurnmayur
committed
common components
1 parent f65d2e0 commit a9f336b

File tree

11 files changed

+119
-182
lines changed

11 files changed

+119
-182
lines changed

‎src/components/ArticleCards/ArticleCard.module.scss‎

Lines changed: 1 addition & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -22,21 +22,6 @@
2222
}
2323
}
2424

25-
.author {
26-
display: flex;
27-
align-items: center;
28-
29-
&_img {
30-
@apply w-[30px] h-[30px] rounded-full mr-[10px] overflow-hidden bg-gray-500;
31-
-webkit-box-shadow: 0px 5px 20px 0px rgba(#7389ff, 0.20);
32-
-moz-box-shadow: 0px 5px 20px 0px rgba(#7389ff, 0.20);
33-
box-shadow: 0px 5px 20px 0px rgba(#7389ff, 0.20);
34-
img{
35-
width: 100%;
36-
}
37-
}
38-
}
39-
4025
.featured_article {
4126
.author_img {
4227
@apply w-[45px] h-[45px] overflow-hidden;
@@ -45,27 +30,4 @@
4530
width: 100%;
4631
}
4732
}
48-
}
49-
50-
// dark theme
51-
52-
// .article_card.dark,
53-
// .featured_article.dark {
54-
// @apply bg-slate-800 text-white drop-shadow-lg;
55-
56-
// &:active,
57-
// &:focus,
58-
// &:visited {
59-
// @apply text-white;
60-
// }
61-
62-
// .author_img {
63-
// -webkit-box-shadow: 0px 5px 20px 0px rgba(#7389ff, 0.20);
64-
// -moz-box-shadow: 0px 5px 20px 0px rgba(#7389ff, 0.20);
65-
// box-shadow: 0px 5px 20px 0px rgba(#7389ff, 0.20);
66-
// overflow: hidden;
67-
// img{
68-
// width: 100%;
69-
// }
70-
// }
71-
// }
33+
}

‎src/components/ArticleCards/ArticleCard.tsx‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import LinkTo from "../LinkTo";
2-
import { generateRandomAvtar } from "../../constants/appConstants";
32
import { IArticleHeaderData } from "../../shared/interfaces";
43
import { combineClasses, transformImagePaths, transformPath } from "../../utils/utils";
54
import classes from "./ArticleCard.module.scss";
5+
import Avatar from '../Misc/Avatar'
66

77
interface IProp {
88
article: IArticleHeaderData;
@@ -40,14 +40,8 @@ const ArticleCard = ({ article, path }: IProp) => {
4040
</div>
4141
</div>
4242
<div className={combineClasses(classes.article_card_footer, "mt-4 mb-3 flex items-center px-3")}>
43-
<div className={classes.author}>
44-
<div className={combineClasses(classes.author_img, 'flex items-center justify-center')}>
45-
{
46-
article.author.profilePic ?
47-
<img src={article.author.profilePic} alt={article.author.name} /> :
48-
<p className="text-center font-medium text-[14px] text-white">{article.author.name[0]}</p>
49-
}
50-
</div>
43+
<div className={"flex items-center"}>
44+
<Avatar author={article.author} className="w-[40px] h-[40px] mr-3 text-xl" />
5145
<p className={combineClasses(classes.author_name, 'text-sm font-medium')}>
5246
{article.author.name}
5347
</p>

‎src/components/ArticleCards/FeaturedArticle.tsx‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import { IArticleHeaderData } from "../../shared/interfaces";
22
import classes from "./ArticleCard.module.scss";
33
import { combineClasses, transformImagePaths, transformPath } from "../../utils/utils";
44
import LinkTo from "../LinkTo";
5-
import { generateRandomAvtar } from "../../constants/appConstants";
65
import { useRouter } from "next/router";
6+
import Avatar from "../Misc/Avatar";
77

88
interface IProp {
99
article: IArticleHeaderData;
@@ -16,21 +16,16 @@ const FeaturedArticle = ({ article, path }: IProp) => {
1616
const gotoPath = (e:any) => {
1717
e.preventDefault()
1818
router.push(transformPath(path))
19-
}
19+
}
20+
2021
return (
2122
<>
2223
<div onClick={gotoPath} className={combineClasses(classes.featured_article,
2324
'md:border-l-[5px] border-b-[5px] md:border-b-0 border-blue-500 dark:bg-slate-800 dark:text-white dark:drop-shadow-lg cursor-pointer')}>
2425
<div className={'w-full md:w-[55%] lg:px-[50px] px-[15px] lg:py-[40px] py-[20px]'}>
2526
<div className={"mt-0 mb-[10px] flex items-center"}>
26-
<div className={classes.author}>
27-
<div className={combineClasses(classes.author_img, 'flex items-center justify-center')}>
28-
{
29-
article.author.profilePic ?
30-
<img src={article.author.profilePic} alt={article.author.name} /> :
31-
<p className="text-center font-medium text-[18px] text-white">{article.author.name[0]}</p>
32-
}
33-
</div>
27+
<div className={"flex items-center"}>
28+
<Avatar author={article.author} className="w-[50px] h-[50px] mr-3 text-xl" />
3429
<p className={combineClasses(classes.author_name, 'text-[14px] md:text-[16px] my-0 font-medium')}>
3530
{article.author.name}
3631
</p>

‎src/components/ArticleCards/SearchArticleCard.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import { generateRandomAvtar } from "../../constants/appConstants";
21
import { IArticleHeaderData } from "../../shared/interfaces"
32
import { combineClasses } from "../../utils/utils";
43
import LinkTo from "../LinkTo";
4+
import Avatar from "../Misc/Avatar";
55
import classes from './ArticleCard.module.scss';
66

77
const SerachArticleCard = ({ article, path }: { article: IArticleHeaderData, path: string }) => (
8-
<div className="w-full md:w-1/3 px-3 mb-10">
8+
<div className="w-full lg:w-1/3 md:w-1/2 px-3 mb-10">
99
<LinkTo href={path} passHref={true}>
1010
<div className={combineClasses(classes.article_card, "px-[15px] py-[10px] border-b-[5px] border-blue-600 dark:bg-slate-800 dark:text-white bg-white text-black drop-shadow-lg")}>
1111
<p className={combineClasses(classes.article_card__date, "font-medium text-xs mt-3 mb-2")}>{article.date}</p>
@@ -21,11 +21,9 @@ const SerachArticleCard = ({ article, path }: { article: IArticleHeaderData, pat
2121
))
2222
}
2323
</div>
24-
<div className={"flex items-center my-3"}>
25-
<div className={classes.author}>
26-
<div className={classes.author_img}>
27-
{article.author.profilePic ? <img src={article.author.profilePic} alt={article.author.name} /> : <img src={generateRandomAvtar()} alt={article.author.name} />}
28-
</div>
24+
<div className={"flex items-center mt-3"}>
25+
<div className="flex items-center">
26+
<Avatar author={article.author} className="w-[40px] h-[40px] mr-3 text-xl" />
2927
<p className={combineClasses(classes.author_name, 'text-sm font-medium')}>
3028
{article.author.name}
3129
</p>

‎src/components/ArticleHeader/ArticleHeaderDefault.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Link from "next/link"
2-
import { generateRandomAvtar } from "../../constants/appConstants"
32
import { IArticleHeaderData } from "../../shared/interfaces"
43
import { combineClasses } from "../../utils/utils"
4+
import Avatar from "../Misc/Avatar"
55
import classes from './ArticleHeader.module.scss'
66
interface IProps {
77
headerData: IArticleHeaderData
@@ -10,9 +10,7 @@ const ArticleHeaderDefault = ({ headerData }: IProps) => {
1010
return (
1111
<div className="mb-[30px]">
1212
<div className="mb-[10px] flex items-center mt-[15px]">
13-
<div className={classes.article_header_author_img}>
14-
{headerData.author.profilePic ? <img src={headerData.author.profilePic} alt={headerData.author.name} /> : <img src={generateRandomAvtar()} alt={headerData.author.name} /> }
15-
</div>
13+
<Avatar author={headerData.author} className="w-[55px] h-[55px] mr-3 text-xl" />
1614
<div>
1715
<div className="flex text-[16px] md:text-lg items-center">
1816
<p className={combineClasses(classes.article_header_author_name, 'font-medium my-0')}>

‎src/components/Misc/ArticleMoreFromAuthor.tsx‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import Link from "next/link"
2+
import { iArticle, IAuthor } from "../../shared/interfaces"
3+
import { combineClasses, transformImagePaths, transformPath } from "../../utils/utils"
4+
import Avatar from "./Avatar"
5+
6+
const ArticleMoreFromAuthor = ({ author, relatedArticles, articleGrid = false }: { author: IAuthor, relatedArticles: iArticle[], articleGrid?: boolean }) => {
7+
const wrapperClasses = 'bg-white dark:bg-slate-800 dark:border-none border-slate-100 shadow-lg border md:rounded-[8px] px-[15px] py-[10px] mb-[30px] overflow-hidden'
8+
return (
9+
<>
10+
<div
11+
className={wrapperClasses}>
12+
<div className="flex items-center">
13+
<Avatar author={author} className="w-[60px] h-[60px] mr-3 text-xl" />
14+
<div className="font-semibold">
15+
<p className={'text-[20px] mb-0 mt-0'}>
16+
{author.name}
17+
</p>
18+
<p className='text-xs mt-0 mb-0'>{author.designation}</p>
19+
</div>
20+
</div>
21+
<p className='text-[16px] mt-2'>{author.bio}</p>
22+
{
23+
author.social?.length &&
24+
<div className='flex items-center flex-wrap mt-3'>
25+
{
26+
author.social.map((each, i) =>
27+
<a href={each.link} key={i} target="_blank" className='mr-[15px] text-[32px]'
28+
rel="noopener noreferrer">{each.icon}</a>
29+
)
30+
}
31+
</div>
32+
}
33+
</div>
34+
{
35+
relatedArticles.length &&
36+
<div className={wrapperClasses}>
37+
<p className='border-b border-gray-300 pb-2 mb-3 font-medium w-full'>More from Author</p>
38+
<div className={articleGrid ? 'flex flex-wrap' : ''}>
39+
{
40+
relatedArticles.map((each, i) =>
41+
<Link href={transformPath(each.path)} key={i} passHref>
42+
<div className={combineClasses('mb-3 cursor-pointer', articleGrid ? 'lg:w-1/3 md:w-1/2 w-full md:pr-2':'w-full')} key={each.path}>
43+
<div
44+
className="
45+
rounded-[3px] dark:bg-slate-800
46+
border border-slate-200 dark:border-slate-900
47+
flex items-center overflow-hidden
48+
shadow-lg hover:shadow-md
49+
">
50+
<div className={"object-cover shrink-0"}>
51+
<img
52+
src={transformImagePaths(each.preview.thumbnail)}
53+
className="w-[120px] h-[70px] mr-2 object-cover"
54+
alt={each.preview.articleTitle} />
55+
</div>
56+
<div className="pr-1 text-[16px] hover:text-blue-500 font-semibold">
57+
{each.preview.articleTitle}
58+
</div>
59+
</div>
60+
</div>
61+
</Link>
62+
)
63+
}
64+
</div>
65+
66+
</div>
67+
}
68+
</>
69+
)
70+
}
71+
72+
export default ArticleMoreFromAuthor

‎src/components/Misc/Avatar.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { IAuthor } from "../../shared/interfaces";
2+
import { combineClasses } from "../../utils/utils";
3+
4+
const Avatar = ({ author, className }: { author: IAuthor, className?: string }) => {
5+
return (
6+
<div className={combineClasses(`flex items-center justify-center shadow-xl rounded-full overflow-hidden bg-blue-500 shrink-0`, className)}>
7+
{author.profilePic ? (
8+
<img
9+
src={author.profilePic}
10+
alt={author.name}
11+
width="100%" />
12+
) : (
13+
<p className="text-center font-medium text-white">
14+
{author.name[0]}
15+
</p>
16+
)}
17+
</div>
18+
);
19+
};
20+
21+
export default Avatar;

‎src/constants/appConstants.ts‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1 @@
1-
export const generateRandomAvtar = () => {
2-
const avtars = [
3-
"https://gravatar.com/avatar/8fab154171e299e9b8fe24305267a8fd?s=200&d=robohash&r=r",
4-
"https://gravatar.com/avatar/9e5a6d786d0a582d2efd40c9a0fa7a03?s=200&d=robohash&r=r",
5-
"https://robohash.org/3be17b6865f19a865d952d3197603fc2?set=set4&bgset=&size=400x400",
6-
"https://robohash.org/1f2fb9642c825da07a83e5cac078e838?set=set3&bgset=&size=200x200",
7-
"https://robohash.org/bd8c21b3272a3425a1fc974899697109?set=set1&bgset=&size=200x200"
8-
]
9-
10-
return avtars[Math.floor(Math.random()*avtars.length)]
11-
}
12-
131
export const CURRENT_YEAR = new Date().getFullYear();

‎src/layouts/PageLayouts/BlogCentered.tsx‎

Lines changed: 3 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import classes from './PageLayout.module.scss';
22
import { combineClasses, getArticleDetails, transformImagePaths, transformPath } from '../../utils/utils';
33
import { SORTED_ARTICLES_BY_DATE } from '../../../BLOG_CONSTANTS/_ARTICLES_LIST';
4-
import { generateRandomAvtar } from '../../constants/appConstants';
54
import Link from 'next/link';
65
import Seperator from '../../components/Seperator';
76
import ArticleHeader from '../../components/ArticleHeader';
7+
import Avatar from '../../components/Misc/Avatar';
8+
import ArticleMoreFromAuthor from '../../components/Misc/ArticleMoreFromAuthor';
89

910
const Centered = ({ children }: any) => {
1011
const ARTICLE_DETAILS = getArticleDetails();
@@ -20,53 +21,7 @@ const Centered = ({ children }: any) => {
2021
</article>
2122
<Seperator />
2223
<div className={combineClasses(classes.author_and_more, 'mx-auto')}>
23-
<div className={combineClasses(classes.sidebar_author_details, "dark:bg-slate-800 dark:border-none dark:drop-shadow-lg")}>
24-
<div className={classes.author}>
25-
<div className={classes.author_img}>
26-
{author.profilePic ? <img src={author.profilePic} alt={author.name} /> : <img src={generateRandomAvtar()} alt={author.name} />}
27-
</div>
28-
<div>
29-
<p className={'text-[20px] font-semibold mb-0 mt-0'}>
30-
{author.name}
31-
</p>
32-
<p className='text-xs mt-0 mb-0'>{author.designation}</p>
33-
</div>
34-
</div>
35-
<p className='text-[16px] font-light mt-2'>{author.bio}</p>
36-
{
37-
author.social?.length &&
38-
<div className='flex items-center flex-wrap'>
39-
{
40-
author.social.map((each, i) =>
41-
<a href={each.link} key={i} target="_blank" className='mr-[15px] text-[32px]'
42-
rel="noopener noreferrer">{each.icon}</a>
43-
)
44-
}
45-
</div>
46-
}
47-
</div>
48-
{
49-
relatedArticles.length &&
50-
<div className={combineClasses(classes.more_from_author, "flex flex-wrap items-center dark:bg-slate-800 dark:border-none dark:drop-shadow-lg")}>
51-
<p className='border-b border-gray-300 pb-2 mb-3 font-medium w-full'>More from Author</p>
52-
{
53-
relatedArticles.map((each, i) =>
54-
<Link href={transformPath(each.path)} key={i} passHref>
55-
<div className='lg:w-1/3 md:w-1/2 w-full md:pr-3' key={each.path}>
56-
<div className={combineClasses(classes.more_from_author__articles, "border border-gray-200 rounded-[8px] pl-2 dark:border-none dark:pl-0 dark:shadow bdark:g-slate-900")}>
57-
<div className={combineClasses(classes.article_image, "h-[80px]")} style={{ background: `url(${transformImagePaths(each.preview.thumbnail)})` }}>
58-
<img src={transformImagePaths(each.preview.thumbnail)} className="invisible" alt="each.preview.articleTitle" />
59-
</div>
60-
<div className={classes.article_title}>
61-
{each.preview.articleTitle}
62-
</div>
63-
</div>
64-
</div>
65-
</Link>
66-
)
67-
}
68-
</div>
69-
}
24+
<ArticleMoreFromAuthor author={author} relatedArticles={relatedArticles} articleGrid />
7025
</div>
7126

7227
</div>

0 commit comments

Comments
 (0)