37 lines
No EOL
1.5 KiB
JavaScript
37 lines
No EOL
1.5 KiB
JavaScript
import DaysList from '@/app/_utils/DaysList'
|
|
import React from 'react'
|
|
import { Checkbox } from "@/components/ui/checkbox"
|
|
import { Input } from '@/components/ui/input'
|
|
import { Button } from '@/components/ui/button'
|
|
|
|
|
|
const Availability = () => {
|
|
return (
|
|
<div className='px-5'>
|
|
<p className='font-semibold text-xl'>Availability</p><hr className='my-5'/>
|
|
<div>
|
|
<p className='my-5 font-semibold'>Available days & time</p>
|
|
<div className='flex flex-col'>
|
|
{DaysList.map((item, index) => (
|
|
<div key={index} className='grid grid-cols-3 border-b mb-2'>
|
|
<p className='flex items-center gap-2 text-sm sm:text-base'><Checkbox />{item.day}</p>
|
|
<div className='flex gap-2 mb-2'>
|
|
<div>
|
|
<p className='mb-1 text-xs font-semibold text-gray-700'>Start time</p>
|
|
<p className='flex gap-1 sm:gap-2 items-center'><Input type='time'/> - </p>
|
|
</div>
|
|
<div>
|
|
<p className='mb-1 text-xs font-semibold text-gray-700'>End time</p>
|
|
<Input type="time"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<Button className="mt-5">Save</Button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Availability |