blogs

2025-04-15 16:37:25 +03:30
parent 9bba9156a3
commit afacc7c488
26 changed files with 458 additions and 103 deletions
@@ -0,0 +1,102 @@
+'use client'
+import { Profile, Calendar } from 'iconsax-react'
+import { NextPage } from 'next'
+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 SingleBlog: NextPage<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 SingleBlog