hamid zarghami
51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
import { type FC } from 'react'
|
||
import type { FormikProps } from 'formik'
|
||
import { Checkbox } from '@/components/ui/checkbox'
|
||
import type { CreateProductType } from '../types/Types'
|
||
|
||
type WeekDaysSectionProps = {
|
||
formik: FormikProps<CreateProductType>
|
||
}
|
||
|
||
const WeekDaysSection: FC<WeekDaysSectionProps> = ({ formik }) => {
|
||
const weekDays = [
|
||
{ value: 0, label: 'شنبه' },
|
||
{ value: 1, label: 'یکشنبه' },
|
||
{ value: 2, label: 'دوشنبه' },
|
||
{ value: 3, label: 'سهشنبه' },
|
||
{ value: 4, label: 'چهارشنبه' },
|
||
{ value: 5, label: 'پنجشنبه' },
|
||
{ value: 6, label: 'جمعه' }
|
||
] as const
|
||
|
||
const handleDayChange = (dayValue: number, checked: boolean) => {
|
||
const currentDays = formik.values.weekDays || []
|
||
if (checked) {
|
||
if (!currentDays.includes(dayValue)) {
|
||
formik.setFieldValue('weekDays', [...currentDays, dayValue])
|
||
}
|
||
} else {
|
||
formik.setFieldValue('weekDays', currentDays.filter(d => d !== dayValue))
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className='mt-6'>
|
||
<div className='text-sm mb-3'>روزهای هفته</div>
|
||
<div className='flex gap-4 sm:gap-6 flex-wrap'>
|
||
{weekDays.map((day) => (
|
||
<div key={day.value} className='flex items-center gap-2'>
|
||
<Checkbox
|
||
checked={(formik.values.weekDays || []).includes(day.value)}
|
||
onCheckedChange={(checked) => handleDayChange(day.value, checked as boolean)}
|
||
/>
|
||
<label className='text-xs cursor-pointer'>{day.label}</label>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default WeekDaysSection
|