hamid zarghami
49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
import { type FC } from 'react'
|
||
import type { FormikProps } from 'formik'
|
||
import { Checkbox } from '@/components/ui/checkbox'
|
||
import type { CreateFoodType } from '../types/Types'
|
||
|
||
type MealTimesSectionProps = {
|
||
formik: FormikProps<CreateFoodType>
|
||
}
|
||
|
||
const MealTimesSection: FC<MealTimesSectionProps> = ({ formik }) => {
|
||
const mealTypes = [
|
||
{ value: 'breakfast', label: 'صبحانه' },
|
||
{ value: 'lunch', label: 'ناهار' },
|
||
{ value: 'dinner', label: 'شام' },
|
||
{ value: 'snack', label: 'عصرانه' }
|
||
] as const
|
||
|
||
const handleMealTypeChange = (mealType: string, checked: boolean) => {
|
||
const currentMealTypes = formik.values.mealTypes || []
|
||
if (checked) {
|
||
if (!currentMealTypes.includes(mealType)) {
|
||
formik.setFieldValue('mealTypes', [...currentMealTypes, mealType])
|
||
}
|
||
} else {
|
||
formik.setFieldValue('mealTypes', currentMealTypes.filter(m => m !== mealType))
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className='mt-6'>
|
||
<div className='text-sm mb-3'>وعدههای غذایی</div>
|
||
<div className='flex gap-6 flex-wrap'>
|
||
{mealTypes.map((mealType) => (
|
||
<div key={mealType.value} className='flex items-center gap-2'>
|
||
<Checkbox
|
||
checked={(formik.values.mealTypes || []).includes(mealType.value)}
|
||
onCheckedChange={(checked) => handleMealTypeChange(mealType.value, checked as boolean)}
|
||
/>
|
||
<label className='text-xs cursor-pointer'>{mealType.label}</label>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default MealTimesSection
|
||
|