comment detail

src/index.css

@@ -67,3 +67,7 @@ tbody tr:nth-child(odd) {
 .rmdp-container {
   width: 100%;
 }
+
+.rowTwoInput {
+  @apply flex flex-col sm:flex-row sm:gap-5 gap-5;
+}

src/pages/comments/Details.tsx

@@ -0,0 +1,175 @@
+import { type FC, useState } from 'react'
+import Button from '@/components/Button'
+import Switch from '@/components/Switch'
+import Input from '@/components/Input'
+import { Checkbox } from '@/components/ui/checkbox'
+import { TickCircle } from 'iconsax-react'
+
+const CommentsDetails: FC = () => {
+    const [isActive, setIsActive] = useState(true)
+    const [foodSearch, setFoodSearch] = useState('')
+    const [categorySearch, setCategorySearch] = useState('')
+    const [selectedFoods, setSelectedFoods] = useState<string[]>([])
+    const [selectedCategories, setSelectedCategories] = useState<string[]>([])
+
+    const allFoods = ['پیتزا پپرونی', 'سالاد سزار', 'پاستا', 'همبرگر', 'سوشی']
+    const allCategories = ['پیش غذا', 'غذای اصلی', 'دسر', 'نوشیدنی', 'سالاد']
+
+    const foods = ['همه', ...allFoods]
+    const categories = ['همه', ...allCategories]
+
+    const filteredFoods = foods.filter(food => {
+        if (food === 'همه') return true
+        if (!foodSearch.trim()) return true
+        return food.includes(foodSearch)
+    })
+
+    const filteredCategories = categories.filter(category => {
+        if (category === 'همه') return true
+        if (!categorySearch.trim()) return true
+        return category.includes(categorySearch)
+    })
+
+    const handleFoodToggle = (food: string) => {
+        if (food === 'همه') {
+            setSelectedFoods(allFoods.length === selectedFoods.length ? [] : allFoods)
+        } else {
+            setSelectedFoods(prev =>
+                prev.includes(food) ? prev.filter(f => f !== food) : [...prev, food]
+            )
+        }
+    }
+
+    const handleCategoryToggle = (category: string) => {
+        if (category === 'همه') {
+            setSelectedCategories(allCategories.length === selectedCategories.length ? [] : allCategories)
+        } else {
+            setSelectedCategories(prev =>
+                prev.includes(category) ? prev.filter(c => c !== category) : [...prev, category]
+            )
+        }
+    }
+
+    const commentNumber = '۱۲۳۴۵'
+
+    return (
+        <div className='mt-5'>
+
+            <div className='flex justify-between items-center mb-8'>
+                <h1 className='text-lg font-light'>نظر {commentNumber}#</h1>
+                <Button
+                    className='w-fit px-5'
+                    onClick={() => console.log('تایید نظر')}
+                >
+                    <div className='flex items-center gap-2'>
+                        <TickCircle color='white' size={20} />
+                        <span>تایید نظر</span>
+                    </div>
+                </Button>
+            </div>
+            <div className='flex gap-7'>
+                {/* Main Content */}
+                <div className='flex-1 bg-white rounded-4xl p-8'>
+
+
+                    <div className='space-y-6'>
+                        <div className='rowTwoInput'>
+                            <Input
+                                label='نام و نام خانوادگی'
+                                value='حمید ضرغامی'
+                                readOnly
+                            />
+
+                            <Input
+                                label='ایمیل'
+                                value='info@example.com'
+                                readOnly
+                            />
+                        </div>
+
+                        <Input
+                            label='غذا ها'
+                            value='پیتزا پپرونی ، سالاد سزار'
+                            readOnly
+                        />
+
+                        <div className='flex gap-4'>
+                            <button className='px-4 py-2 border border-red-500 text-red-500 rounded-xl text-sm bg-white whitespace-nowrap'>
+                                تنوع کم و محدود
+                            </button>
+                            <button className='px-4 py-2 border border-green-500 text-green-500 rounded-xl text-sm bg-white whitespace-nowrap'>
+                                کیفیت خوب منو
+                            </button>
+                        </div>
+
+                        <p className='text-xs font-light leading-6'>
+                            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می‌باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می‌طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه‌ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می‌توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد
+                        </p>
+                    </div>
+                </div>
+
+                {/* Sidebar */}
+                <div className='w-[330px] h-fit bg-white rounded-4xl p-8 flex flex-col gap-6'>
+
+                    <div className='flex items-center justify-between'>
+                        <span className='text-sm'>فعال</span>
+                        <Switch
+                            active={isActive}
+                            onChange={setIsActive}
+                        />
+                    </div>
+
+                    <div>
+                        <div className='text-sm mb-4'>وضعیت نمایش</div>
+
+                        <div className='mb-6 border border-border rounded-xl p-4'>
+                            <div className='text-xs mb-3'>نمایش در غذاهای</div>
+                            <Input
+                                // variant='search'
+                                placeholder='جستجو'
+                                value={foodSearch}
+                                onChange={(e) => setFoodSearch(e.target.value)}
+                                className='mb-3'
+                            />
+                            <div className='flex flex-col gap-3'>
+                                {filteredFoods.map((food, index) => (
+                                    <div key={index} className='flex items-center gap-2'>
+                                        <Checkbox
+                                            checked={food === 'همه' ? selectedFoods.length === allFoods.length : selectedFoods.includes(food)}
+                                            onCheckedChange={() => handleFoodToggle(food)}
+                                        />
+                                        <label className='text-xs cursor-pointer'>{food}</label>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+
+                        <div className='border border-border rounded-xl p-4'>
+                            <div className='text-xs mb-3'>نمایش در دسته بندی های</div>
+                            <Input
+                                // variant='search'
+                                placeholder='جستجو'
+                                value={categorySearch}
+                                onChange={(e) => setCategorySearch(e.target.value)}
+                                className='mb-3'
+                            />
+                            <div className='flex flex-col gap-3'>
+                                {filteredCategories.map((category, index) => (
+                                    <div key={index} className='flex items-center gap-2'>
+                                        <Checkbox
+                                            checked={category === 'همه' ? selectedCategories.length === allCategories.length : selectedCategories.includes(category)}
+                                            onCheckedChange={() => handleCategoryToggle(category)}
+                                        />
+                                        <label className='text-xs cursor-pointer'>{category}</label>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default CommentsDetails

src/router/Main.tsx

@@ -15,6 +15,7 @@ import CreateCustomer from '@/pages/customers/Create'
 import OrdersList from '@/pages/orders/List'
 import OrderDetails from '@/pages/orders/Details'
 import CommentsList from '@/pages/comments/List'
+import CommentsDetails from '@/pages/comments/Details'
 const MainRouter: FC = () => {
 
     const { hasSubMenu } = useSharedStore()
@@ -41,6 +42,7 @@ const MainRouter: FC = () => {
                             <Route path={Pages.orders.list} element={<OrdersList />} />
                             <Route path={Pages.orders.detail + ':id'} element={<OrderDetails />} />
                             <Route path={Pages.comments.list} element={<CommentsList />} />
+                            <Route path={Pages.comments.detail + ':id'} element={<CommentsDetails />} />
                         </Routes>
                     </div>
                 </div>