hamid zarghami
102 lines
3.9 KiB
TypeScript
102 lines
3.9 KiB
TypeScript
'use client'
|
||
import { Profile, Calendar } from 'iconsax-react'
|
||
import { FC } from 'react'
|
||
import Image from 'next/image'
|
||
// import MostVisited from '../components/MostVisited'
|
||
import ContactUs from '../components/ContactUs'
|
||
import { useGetBlogSingle } from '../hooks/useBlogsData'
|
||
import { toJalaliDate } from '@/config/func'
|
||
import MostVisited from './MostVisited'
|
||
|
||
type Props = {
|
||
id: string
|
||
}
|
||
|
||
const SingleBlogPage: FC<Props> = ({ id }) => {
|
||
|
||
const { data } = useGetBlogSingle(id)
|
||
if (!data) return <div></div>
|
||
return (
|
||
<div className='mt-24 max-w-maxWidth mx-auto'>
|
||
<h1 className='text-2xl font-bold'>
|
||
{data?.data?.blog?.title}
|
||
</h1>
|
||
|
||
<div className='mt-10 flex gap-8'>
|
||
<div className='flex-1 bg-white rounded-4xl p-10'>
|
||
<div className='flex gap-4'>
|
||
<div className='flex gap-1'>
|
||
<div className='size-5 overflow-hidden rounded-full'>
|
||
<Image
|
||
src={data?.data?.blog?.category?.iconUrl}
|
||
alt={data?.data?.blog?.category?.title}
|
||
width={20}
|
||
height={20}
|
||
/>
|
||
</div>
|
||
<h6 className='text-[#7D818C] text-sm'>{data?.data?.blog?.category?.title}</h6>
|
||
</div>
|
||
|
||
<div className='flex gap-1'>
|
||
<Profile size={20} color='#7D818C' />
|
||
<h6 className='text-[#7D818C] text-sm'>{data?.data?.blog?.author.firstName} {data?.data?.blog?.author.lastName}</h6>
|
||
</div>
|
||
|
||
<div className='flex gap-1'>
|
||
<Calendar size={20} color='#7D818C' />
|
||
<h6 className='text-[#7D818C] text-sm'>{toJalaliDate(data?.data?.blog?.createdAt)}</h6>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='mt-6'>
|
||
<Image
|
||
src={data?.data?.blog?.imageUrl}
|
||
alt={data?.data?.blog?.title}
|
||
width={1000}
|
||
height={1000}
|
||
className='w-full rounded-4xl max-h-[400px] object-cover'
|
||
/>
|
||
</div>
|
||
|
||
<p dangerouslySetInnerHTML={{ __html: data?.data?.blog?.content }} className='mt-8 text-sm leading-6'>
|
||
|
||
</p>
|
||
|
||
<div className='mt-6 flex gap-4 border-y border-[#E5E5E5] py-4'>
|
||
<div className='text-sm'>اشتراک گذاری</div>
|
||
<Image
|
||
src='/images/instagram.svg'
|
||
alt='share'
|
||
width={20}
|
||
height={20}
|
||
/>
|
||
<Image
|
||
src='/images/instagram.svg'
|
||
alt='share'
|
||
width={20}
|
||
height={20}
|
||
/>
|
||
<Image
|
||
src='/images/instagram.svg'
|
||
alt='share'
|
||
width={20}
|
||
height={20}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='w-[261px]'>
|
||
<MostVisited />
|
||
<div className='mt-6'>
|
||
<ContactUs />
|
||
</div>
|
||
<div className='mt-6'>
|
||
{/* <MostVisited /> */}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default SingleBlogPage |