fix warnings from components

src/langs/fa.json

@@ -220,6 +220,11 @@
     "shareDate": "تاریخ انتشار",
     "enter_your_title": "عنوان بلاگ را وارد کنید",
     "add_blog": "افزودن بلاگ",
+"blog_category": "دسته بندی بلاگ",
+"add_category": "اضافه کردن دسته بندی",
+"category_status": "وضعیت دسته بندی",
+"category_title": "عنوان دسته بندی",
+"parent_category": "دسته بندی مادر",
     "price": "مبلغ تخفیف",
     "title": "عنوان کد",
     "code": "کد تخفیف",

src/pages/ads/AdsList.tsx

@@ -9,7 +9,7 @@ import SwitchComponent from '../../components/Switch'
 import DatePickerComponent from '../../components/DatePicker'
 import Select from '../../components/Select'
 import Input from '../../components/Input'
-const TicketList: FC = () => {
+const AddList: FC = () => {
     const { t } = useTranslation('global')
     return (
         <div className='mt-4 min-h-[500px]'>
@@ -31,12 +31,8 @@ const TicketList: FC = () => {
                     </Button>
                 </Link>
             </div>
-
-
-
-
             <div className='mt-4'>
-                <div className='flex justify-between items-center'>
+                <div className='flex flex-col xl:flex-row justify-between items-center xl:items-end'>
                     <div className='flex items-center gap-4'>
                         <div className='w-[200px]'>
                             <DatePickerComponent
@@ -60,8 +56,7 @@ const TicketList: FC = () => {
                         </div>
                     </div>
 
-
+                    <div className='mt-6 xl:mt-0 max-w-[420px] xl:w-[300px] w-full'>
-                    <div className='xl:w-[300px] w-full'>
                         <Input
                             variant='search'
                             placeholder={t('ads.search')}
@@ -72,9 +67,6 @@ const TicketList: FC = () => {
                 </div>
             </div>
 
-
-
-
             <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
                 <table className='w-full text-sm '>
                     <thead className='thead'>
@@ -132,4 +124,4 @@ const TicketList: FC = () => {
     )
 }
 
-export default TicketList
+export default AddList

src/pages/ads/CreateAds.tsx

@@ -6,7 +6,7 @@ import SwitchComponent from '../../components/Switch'
 import { TickCircle, TickSquare, Link2 } from 'iconsax-react'
 import DatePickerComponent from '../../components/DatePicker'
 import ImageUploader from './components/ImageUploader'
-const CreateTicket: FC = () => {
+const CreateAd: FC = () => {
     const { t } = useTranslation('global')
     return (
         <div className='mt-4'>
@@ -25,7 +25,7 @@ const CreateTicket: FC = () => {
                     </div>
                 </Button>
             </div>
-            <div className='flex gap-6 xl:mt-8 mt-4'>
+            <div className='flex flex-col-reverse xl:flex-row gap-6 xl:mt-8 mt-4'>
                 <div className='flex-1 min-h-[calc(100vh-201px)] bg-white py-8 xl:px-10 px-4 rounded-3xl'>
                     <div className='mt-6'>
                         <Input
@@ -55,7 +55,7 @@ const CreateTicket: FC = () => {
                         <Link2 size={20} color='blue' className='absolute left-4 bottom-[10px]' />
                     </div>
                 </div>
-                <div className='min-h-[calc(100vh-201px)] bg-white w-sidebar xl:block hidden py-10 px-5 h-fit rounded-3xl'>
+                <div className='min-h-[calc(100vh-201px)] bg-white w-full xl:w-sidebar  py-10 px-5 h-fit rounded-3xl'>
                     <div className='text-sm flex items-center justify-between'>
                         <p>
                             وضعیت تبلیغ
@@ -105,4 +105,4 @@ const CreateTicket: FC = () => {
     )
 }
 
-export default CreateTicket
+export default CreateAd

src/pages/blog/BlogCategory.tsx

@@ -0,0 +1,147 @@
+
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import Select from '../../components/Select'
+import Input from '../../components/Input'
+import Td from '../../components/Td'
+import SwitchComponent from '../../components/Switch'
+import { TickSquare, More, TickCircle } from 'iconsax-react'
+import "quill/dist/quill.snow.css";
+import Button from '../../components/Button'
+const BlogCategory: FC = () => {
+    const { t } = useTranslation('global')
+    return (
+        <div className='mt-4'>
+            <div className='flex justify-start items-center'>
+                <div>
+                    {t('blog.blog_category')}
+                </div>
+            </div>
+            <div className='flex gap-6 xl:mt-8 mt-4'>
+                <div className='flex-1'>
+                    <div className='flex items-end w-full justify-between'>
+                        <div className='w-[200px]'>
+                            <Select
+                                items={[
+                                    {
+                                        label: 'تست',
+                                        value: 'active'
+                                    }
+                                ]}
+                                className='bg-white border'
+                            />
+                        </div>
+                        <div className='xl:w-[300px] w-full'>
+                            <Input
+                                variant='search'
+                                placeholder={t('ads.search')}
+                                className='bg-white w-full'
+                            />
+                        </div>
+                    </div>
+                    <div className='bg-white min-h-[calc(100vh-245px)] mt-4 rounded-3xl'>
+                        <div className='relative overflow-x-auto rounded-3xl w-full'>
+                            <table className='w-full text-sm '>
+                                <thead className='thead'>
+                                    <tr>
+                                        <td className='w-[100px]'>
+
+                                        </td>
+                                        <Td text={t('blog.number')} />
+                                        <Td text={t('blog.blog_title')} />
+                                        <Td text={t('blog.blog_Summary')} />
+                                        <Td text={t('blog.category')} />
+                                        <Td text={t('blog.shareDate')} />
+                                        <Td text={t('blog.status')} />
+                                        <Td text={''} />
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr className='tr'>
+                                        <td>
+                                            <div className='flex justify-center'>
+                                                <TickSquare size={20} color='black' variant='Bold' />
+                                            </div>
+                                        </td>
+                                        <Td text={t('blog.number')} />
+                                        <Td text={t('blog.blog_title')} />
+                                        <Td text={t('blog.blog_Summary')} />
+                                        <Td text={t('blog.category')} />
+                                        <Td text={t('blog.shareDate')} />
+                                        <Td text={t('')}>
+                                            <SwitchComponent
+                                                active={true}
+                                                onChange={() => { }}
+                                            />
+                                        </Td>
+                                        <Td text={''}>
+                                            <More size={20} color='black' className='rotate-90' />
+                                        </Td>
+                                    </tr>
+                                    <tr className='tr'>
+                                        <td>
+                                            <div className='flex justify-center'>
+                                                <TickSquare size={20} color='black' variant='Bold' />
+                                            </div>
+                                        </td>
+                                        <Td text={t('blog.number')} />
+                                        <Td text={t('blog.blog_title')} />
+                                        <Td text={t('blog.blog_Summary')} />
+                                        <Td text={t('blog.category')} />
+                                        <Td text={t('blog.shareDate')} />
+                                        <Td text={t('')}>
+                                            <SwitchComponent
+                                                active={true}
+                                                onChange={() => { }}
+                                            />
+                                        </Td>
+                                        <Td text={''}>
+                                            <More size={20} color='black' className='rotate-90' />
+                                        </Td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+                <div className='relative bg-white min-h-[calc(100vh-185px)] w-sidebar xl:block hidden py-10 px-5 h-fit rounded-3xl'>
+                    <p className='text-md'>{t('blog.add_category')}</p>
+                    <div className='text-sm flex items-center justify-between mt-4'>
+                        <p>
+                            {t('blog.category_status')}
+                        </p>
+                        <div className='flex gap-1 text-xs items-center text-description'>
+                            <div>
+                                {t('ads.deactive')}
+                            </div>
+                            <SwitchComponent
+                                active={false}
+                                onChange={() => { }}
+                            />
+                        </div>
+                    </div>
+                    <p className='mt-6 text-sm'>{t('blog.category_title')}</p>
+                    <div className='mt-6'>
+                        <Input className='-mt-4' />
+                    </div>
+                    <p className='mt-6 text-sm'>{t('blog.parent_category')}</p>
+                    <div className='mt-6'>
+                        <Input className='-mt-4' />
+                    </div>
+
+                    <Button
+                        className='w-[172px] absolute bottom-4 left-4'
+                    >
+                        <div className='flex gap-2 items-center'>
+                            <TickCircle size={20} color='white' />
+                            <div>
+                                {t('blog.submit')}
+                            </div>
+                        </div>
+                    </Button>
+                </div>
+            </div>
+        </div>
+    )
+}
+export default BlogCategory

src/pages/blog/BlogList.tsx

@@ -36,9 +36,9 @@ const BlogList: FC = () => {
 
 
             <div className='mt-4'>
-                <div className='flex justify-between items-center'>
+                <div className='flex flex-col xl:flex-row justify-between items-center xl:items-end'>
-                    <div className='flex items-center gap-4'>
+                    <div className='flex flex-col xl:flex-row items-center gap-4'>
-                        <div className='w-[200px]'>
+                        <div className='w-[400px] xl:w-[200px]'>
                             <Select
                                 label={t('blog.category')}
                                 items={[
@@ -50,7 +50,7 @@ const BlogList: FC = () => {
                                 className='bg-white border'
                             />
                         </div>
-                        <div className='w-[200px]'>
+                        <div className='w-[400px] xl:w-[200px]'>
                             <Select
                                 label={t('ads.status')}
                                 items={[
@@ -62,7 +62,7 @@ const BlogList: FC = () => {
                                 className='bg-white border'
                             />
                         </div>
-                        <div className='w-[200px]'>
+                        <div className='w-[400px] xl:w-[200px]'>
                             <DatePickerComponent
                                 label={t('ads.date')}
                                 onChange={() => { }}
@@ -73,7 +73,7 @@ const BlogList: FC = () => {
                     </div>
 
 
-                    <div className='xl:w-[300px] w-full'>
+                    <div className='w-[400px] mt-8 xl:mt-0 xl:w-[300px]'>
                         <Input
                             variant='search'
                             placeholder={t('ads.search')}

src/pages/blog/CreateBlog.tsx

@@ -4,18 +4,17 @@ import { useTranslation } from 'react-i18next'
 import Input from '../../components/Input'
 import Button from '../../components/Button'
 import SwitchComponent from '../../components/Switch'
-import { TickCircle, TickSquare, Link2 } from 'iconsax-react'
+import { TickCircle, TickSquare } from 'iconsax-react'
-import DatePickerComponent from '../../components/DatePicker'
 import ImageUploader from './components/ImageUploader'
 import "quill/dist/quill.snow.css";
 import Quill from 'quill';
 const CreateBlog: FC = () => {
     const { t } = useTranslation('global')
     useEffect(() => {
-        const quill = new Quill('#editor', {
+        new Quill('#editor', {
             theme: 'snow',
         });
-        const quill2 = new Quill('#editor2', {
+        new Quill('#editor2', {
             theme: 'snow',
         });
     }, []);
@@ -36,7 +35,7 @@ const CreateBlog: FC = () => {
                     </div>
                 </Button>
             </div>
-            <div className='flex gap-6 xl:mt-8 mt-4'>
+            <div className='flex flex-col-reverse xl:flex-row gap-6 xl:mt-8 mt-4'>
                 <div className='flex-1 min-h-[calc(100vh-201px)] bg-white py-8 xl:px-10 px-4 rounded-3xl'>
                     <div className='mt-6'>
                         <Input
@@ -58,7 +57,7 @@ const CreateBlog: FC = () => {
                 </div>
 
 
-                <div className='min-h-[calc(100vh-201px)] bg-white w-sidebar xl:block hidden py-10 px-5 h-fit rounded-3xl'>
+                <div className='min-h-[calc(100vh-201px)] bg-white w-full xl:w-sidebar py-10 px-5 h-fit rounded-3xl'>
                     <div className='text-sm flex items-center justify-between'>
                         <p>
                             {t('blog.blog_status')}
@@ -109,9 +108,6 @@ const CreateBlog: FC = () => {
                         </p>
                     </div>
 
-
-
-
                 </div>
             </div>
 

src/pages/discounts/CreateDiscount.tsx

@@ -5,9 +5,8 @@ import Button from '../../components/Button'
 import SwitchComponent from '../../components/Switch'
 import { TickCircle, TickSquare, Refresh } from 'iconsax-react'
 import DatePickerComponent from '../../components/DatePicker'
-import ImageUploader from './components/ImageUploader'
 import RadioGroup from '../../components/RadioGroup'
-const CreateTicket: FC = () => {
+const CreateDiscount: FC = () => {
     const { t } = useTranslation('global')
     return (
         <div className='mt-4'>
@@ -42,21 +41,18 @@ const CreateTicket: FC = () => {
                                         value: 'year'
                                     }
                                 ]}
-                                onChange={''}
+                                onChange={() => ''}
                                 selected={''}
                             />
                         </div>
                     </div>
-
-
                     <div className='mt-6 rowTwoInput'>
                         <Input
                             label={t('discount.title')}
                             placeholder={t('discount.enter_discount_description')}
                         />
-
+                        <div className='w-full sm:mt-7 flex flex-col xl:flex-row items-center'>
-                        <div className='w-full mt-7 flex items-center'>
+                            <button className='text-xs border h-[39px] xl:h-full w-full xl:w-[142px] border-black rounded-xl flex justify-center items-center gap-2'>
-                            <button className='text-xs border h-full w-[142px] border-black rounded-xl flex justify-center items-center gap-2'>
                                 <Refresh
                                     size={18} color='black'
                                 />
@@ -65,18 +61,9 @@ const CreateTicket: FC = () => {
                                 </p>
                             </button>
                         </div>
-
                     </div>
-
-
-
-
-
                     <div className='mt-6 rowTwoInput'>
-
-
                         <div className='w-full'>
-
                             {t('discount.price')}
                             <div className='rowTwoInput mt-2'>
                                 <RadioGroup
@@ -90,30 +77,16 @@ const CreateTicket: FC = () => {
                                             value: 'year'
                                         }
                                     ]}
-                                    onChange={''}
+                                    onChange={() => ''}
                                     selected={''}
                                 />
                             </div>
-
                         </div>
-
                         <Input
                             label={t('discount.price_or_percent')}
                             placeholder={t('discount.enter_price_or_percent')}
                         />
-
-
                     </div>
-
-
-
-
-
-
-
-
-
-
                     <div className='mt-6 rowTwoInput'>
                         <DatePickerComponent
                             label={t('discount.startDate')}
@@ -146,14 +119,10 @@ const CreateTicket: FC = () => {
                     </div>
                     <p className='mt-6 text-sm'>{t('discount.availabe_service')}</p>
                     <div className='p-2 border border-[##D0D0D0] rounded-lg mt-2'>
-
                         <Input
                             variant='search'
                             placeholder={t('header.search')}
                         />
-
-
-
                         <div className='flex items-start gap-2 py-2'>
                             <div>
                                 <TickSquare size={20} color='black' variant='Bold' />
@@ -179,12 +148,9 @@ const CreateTicket: FC = () => {
                             </div>
                         </div>
                     </div>
-
                 </div>
             </div>
-
         </div>
     )
 }
-
+export default CreateDiscount
-export default CreateTicket

src/pages/discounts/DiscountsList.tsx

@@ -7,7 +7,7 @@ import { Link } from 'react-router-dom'
 import { Pages } from '../../config/Pages'
 import SwitchComponent from '../../components/Switch'
 import Input from '../../components/Input'
-const TicketList: FC = () => {
+const DiscountList: FC = () => {
     const { t } = useTranslation('global')
     return (
         <div className='mt-4 min-h-[500px]'>
@@ -113,4 +113,4 @@ const TicketList: FC = () => {
     )
 }
 
-export default TicketList
+export default DiscountList

src/router/Main.tsx

@@ -10,6 +10,7 @@ import CreateDiscount from '../pages/discounts/CreateDiscount'
 import AdsList from '../pages/ads/AdsList'
 import BlogList from '../pages/blog/BlogList'
 import CreateBlog from '../pages/blog/CreateBlog'
+import BlogCategory from '../pages/blog/BlogCategory'
 import CreateAds from '../pages/ads/CreateAds'
 import TicketList from '../pages/ticket/TicketList'
 import CreateTicket from '../pages/ticket/CreateTicket'
@@ -61,6 +62,7 @@ const MainRouter: FC = () => {
                             <Route path={Pages.discount.create} element={<CreateDiscount />} />
                             <Route path={Pages.blog.list} element={<BlogList />} />
                             <Route path={Pages.blog.create} element={<CreateBlog />} />
+                            <Route path={Pages.blog.category} element={<BlogCategory />} />
                             <Route path={Pages.transactions} element={<TransactionList />} />
                             <Route path={Pages.receipts.index} element={<ReceiptsList />} />
                             <Route path={Pages.receipts.detail + ':id'} element={<ReceiptsDetail />} />