comment detail
This commit is contained in:
hamid zarghami
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user