hamid zarghami
60 lines
2.2 KiB
TypeScript
60 lines
2.2 KiB
TypeScript
import { FC } from 'react'
|
||
import Image from 'next/image'
|
||
import { ArrowLeft, Calendar2, Profile } from 'iconsax-react'
|
||
import { Blog } from '../types/BlogTypes'
|
||
import { toJalaliDate } from '@/config/func'
|
||
import Link from 'next/link'
|
||
|
||
interface BigBlogItemProps {
|
||
item: Blog
|
||
}
|
||
|
||
const BigBlogItem: FC<BigBlogItemProps> = ({ item }) => {
|
||
return (
|
||
<div className='w-full rounded-4xl bg-white p-7 flex xl:flex-row flex-col gap-6'>
|
||
<Image src={item.imageUrl} alt='blog' width={300} height={300} className='size-[150px] object-cover mx-auto xl:mx-0 rounded-4xl' />
|
||
<div className='flex-1'>
|
||
<h4 className='font-bold text-sm leading-6'>
|
||
{item.title}
|
||
</h4>
|
||
|
||
<div className='mt-3 flex gap-3 text-xs'>
|
||
<div className='flex text-[#7D818C] items-center gap-1'>
|
||
<Profile
|
||
size={18}
|
||
color='#7D818C'
|
||
/>
|
||
<h6 className='text-sm'>
|
||
{item.author.firstName} {item.author.lastName}
|
||
</h6>
|
||
</div>
|
||
<div className='flex text-[#7D818C] items-center gap-1'>
|
||
<Calendar2
|
||
size={18}
|
||
color='#7D818C'
|
||
/>
|
||
<h6 className='text-sm'>
|
||
{toJalaliDate(item.createdAt)}
|
||
</h6>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='mt-3 text-sm leading-5'>
|
||
{item.previewContent.replace(/<\/?[^>]+(>|$)/g, "")}
|
||
</div>
|
||
|
||
<Link href={`/blogs/${item.id}`}>
|
||
<div className='mt-3 flex gap-1 text-sm text-[#8C90A3]'>
|
||
<div>ادامه ی مطلب</div>
|
||
<ArrowLeft
|
||
size={18}
|
||
color='#8C90A3'
|
||
/>
|
||
</div>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default BigBlogItem |