ticket and annoncement

src/pages/annoncement/Detail.tsx

@@ -1,13 +1,17 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import StatusWithText from '../../components/StatusWithText'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 import { ArrowLeft2 } from 'iconsax-react'
+import { useGetAnnoncementDetail } from './hooks/useAnnoncementData'
+import PageLoading from '../../components/PageLoading'
 
 const AnnouncementDetail: FC = () => {
 
+    const { id } = useParams()
     const { t } = useTranslation('global')
     const navigate = useNavigate()
+    const getAnnoncementDetail = useGetAnnoncementDetail(id ? id : '')
 
     return (
         <div className='mt-4'>
@@ -21,21 +25,29 @@ const AnnouncementDetail: FC = () => {
                 </div>
             </div>
 
-            <div className='flex-1 mt-4 bg-white py-6 px-4 rounded-2xl'>
-                <div className='flex justify-between items-start'>
-                    <div className='text-sm max-w-[70%] leading-67'>
-                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
-                    </div>
-                    <StatusWithText
-                        variant='success'
-                        text={t('announcement.new')}
-                    />
-                </div>
+            {
+                getAnnoncementDetail.isPending ?
+                    <PageLoading />
+                    :
+                    <div className='flex-1 mt-4 bg-white py-6 px-4 rounded-2xl'>
+                        <div className='flex justify-between items-start'>
+                            <div className='text-sm max-w-[70%] leading-67'>
+                                {getAnnoncementDetail.data?.data?.announcement?.title}
+                            </div>
+                            {
+                                getAnnoncementDetail.data?.data?.announcement.isImportant &&
+                                <StatusWithText
+                                    variant='error'
+                                    text={t('announcement.important')}
+                                />
+                            }
+                        </div>
 
-                <div className='mt-5 leading-7 text-xs font-light'>
-                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
-                </div>
-            </div>
+                        <div dangerouslySetInnerHTML={{ __html: getAnnoncementDetail.data?.data?.announcement?.content }} className='mt-5 leading-7 text-xs font-light'>
+
+                        </div>
+                    </div>
+            }
         </div>
     )
 }