81 lines
2.1 KiB
TypeScript
81 lines
2.1 KiB
TypeScript
import Image from 'next/image';
|
|
import type { IBlogPost } from '@/types/IBlogPost';
|
|
import { ArrowMoreIcon } from '../icons/ArrowMoreIcon';
|
|
import Link from 'next/link';
|
|
|
|
export default function PostCard({
|
|
createdAt,
|
|
title,
|
|
desc,
|
|
image,
|
|
tags,
|
|
id,
|
|
}: IBlogPost) {
|
|
const [date, month, year] = createdAt.split(' ');
|
|
|
|
return (
|
|
<Link
|
|
href={'/blog/' + id}
|
|
className="border-[#3D425C] border-b py-6 flex justify-stretch items-center gap-x-4 gap-y-3 max-sm:flex-col"
|
|
>
|
|
<Image
|
|
src={image}
|
|
alt={title}
|
|
fill
|
|
objectFit="cover"
|
|
className="sm:hidden !static"
|
|
/>
|
|
<div className="self-end min-w-[105px] flex-1 max-lg:hidden">
|
|
<h2 className="h2 font-medium mb-2">{date}</h2>
|
|
<p className="descriptor font-medium">
|
|
{month} {year}
|
|
</p>
|
|
</div>
|
|
<Image
|
|
src={image}
|
|
alt={title}
|
|
fill
|
|
objectFit="cover"
|
|
className="max-lg:hidden !static max-w-[496px]"
|
|
/>
|
|
<Image
|
|
src={image}
|
|
alt={title}
|
|
fill
|
|
objectFit="cover"
|
|
className="hidden sm:max-lg:block !static max-w-[264px] min-h-60"
|
|
/>
|
|
<div className="flex justify-between flex-col lg:max-w-[39vw] sm-max-lg:flex-1 self-stretch max-sm:gap-y-3">
|
|
<div className="">
|
|
<div className="flex gap-2 mb-4">
|
|
{tags.map(tag => (
|
|
<PostTag text={tag} key={tag} />
|
|
))}
|
|
</div>
|
|
<p className="accent font-medium mb-5">{title}</p>
|
|
<p className="m-text">{desc}</p>
|
|
</div>
|
|
<div className="flex max-lg:justify-between lg:justify-end items-end max-sm:mt-2">
|
|
<p className="descriptor lg:hidden font-medium opacity-70">
|
|
{date} {month} {year}
|
|
</p>
|
|
<ArrowMoreIcon className="self-end" />
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
function PostTag({ text, active = false }: { text: string; active?: boolean }) {
|
|
return (
|
|
<div
|
|
className={
|
|
'p-3 rounded-3xl btn-text font-semibold ' +
|
|
(active ? 'bg-[#798FFF]' : 'bg-[#3D425C4D]')
|
|
}
|
|
>
|
|
{text}
|
|
</div>
|
|
);
|
|
}
|