27 lines
No EOL
1.2 KiB
JavaScript
27 lines
No EOL
1.2 KiB
JavaScript
import { Calendar } from "@/components/ui/calendar"
|
|
import React from 'react'
|
|
|
|
|
|
|
|
const TimeDateSelection = ({date, handleDatechange, timeSlots, setSelectedTime, unavialableTime, selectedTime, booking}) => {
|
|
const checkTimeSlot = (time) => {
|
|
return (booking.filter(item => item.selectedTime == time)).length > 0
|
|
}
|
|
|
|
|
|
return (
|
|
<div className='grid px-2 md:px-5 lg:col-span-2 min-[480px]:flex'>
|
|
<div className="flex flex-col">
|
|
<p className="font-semibold mt-5 lg:mt-0">Select your meeting date & time</p>
|
|
<Calendar disabled={(date) => date <= new Date()} mode="single" selected={date} onSelect={(d) => handleDatechange(d)} className="rounded-md border mt-5"/>
|
|
</div>
|
|
<div className="w-full flex flex-col overflow-auto gap-2 p-2 md:p-5" style={{maxHeight: '350px'}}>
|
|
{timeSlots?.map((time, index) => (
|
|
<button key={index} disabled={!unavialableTime || checkTimeSlot(time)} onClick={() => setSelectedTime(time)} className={`text-xs p-2 border rounded-md hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-200 ${time == selectedTime && 'bg-gray-200'}`}>{time}</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default TimeDateSelection |