announcement detail and reponsive announcement list and responsive citixisms and learning and ...

src/pages/annoncement/Detail.tsx

@@ -0,0 +1,39 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import StatusWithText from '../../components/StatusWithText'
+
+const AnnouncementDetail: FC = () => {
+
+    const { t } = useTranslation('global')
+
+    return (
+        <div className='mt-4'>
+            <div className='flex justify-between'>
+                <div>
+                    {t('announcement.text_announcement')}
+                </div>
+                <div className='text-xs font-extralight'>
+                    {t('back')}
+                </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>
+
+                <div className='mt-5 leading-7 text-xs font-light'>
+                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default AnnouncementDetail

src/pages/annoncement/List.tsx

@@ -16,7 +16,7 @@ const AnnouncementtList: FC = () => {
             </div>
 
             <div className='mt-10 flex gap-8'>
-                <div className='bg-white w-[400px] rounded-2xl p-6'>
+                <div className='bg-white xl:w-[400px] w-full rounded-2xl p-6'>
                     <div className='flex gap-3 items-center'>
                         <div className='flex-1'>
                             <Input
@@ -44,7 +44,7 @@ const AnnouncementtList: FC = () => {
                             'bg-[#F8F9FB]'
                         )}>
                             <div className='flex justify-between'>
-                                <div className='leading-6 max-w-[70%]'>
+                                <div className='leading-6 text-xs xl:text-sm max-w-[70%]'>
                                     لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
                                 </div>
 
@@ -73,7 +73,7 @@ const AnnouncementtList: FC = () => {
                             'p-4 rounded-2xl',
                         )}>
                             <div className='flex justify-between'>
-                                <div className='leading-6 max-w-[70%]'>
+                                <div className='leading-6 text-xs xl:text-sm max-w-[70%]'>
                                     لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
                                 </div>
 
@@ -101,7 +101,7 @@ const AnnouncementtList: FC = () => {
                     </div>
                 </div>
 
-                <div className='flex-1 bg-white py-7 px-5 rounded-2xl'>
+                <div className='flex-1 hidden xl:block bg-white py-7 px-5 rounded-2xl'>
                     <div className='flex justify-between items-center'>
                         <div className='text-lg'>
                             متن اطلاعیه