feat(TimeSlotSelector): Mapped out time slot buttons.

This commit is contained in:
ahmad.ahmad1 2025-02-01 16:01:19 -07:00
parent 6cbd1cc4f5
commit 583be5dcd2

View File

@ -36,7 +36,7 @@ const TimeSlotSelector = ({ onTimeSlotSelect }) => {
};
const handleTimeSlotChange = (e) => {
let startTime = e.target.value;
let startTime = e.target.innerHTML;
onTimeSlotSelect((prev) => ({ ...prev, startTime }));
};
@ -53,17 +53,30 @@ const TimeSlotSelector = ({ onTimeSlotSelect }) => {
) : (
<>
<h4>Available Time Slots for {selectedDate}:</h4>
{timeSlots.length > 0 ? (
<select onChange={handleTimeSlotChange}>
<option value="">Select a time slot</option>
{timeSlots.map((time, index) => (
<option key={index} value={time}>
{selectedDate === undefined ? (
<>
<p>Please select a date.</p>
</>
) : timeSlots.length > 0 ? (
<>
{Object.values(timeSlots).map((time) => {
return (
<button
key={time}
onClick={(self) => {
console.log(self.target.innerHTML);
handleTimeSlotChange(self);
}}
>
{time}
</option>
))}
</select>
</button>
);
})}
</>
) : (
<>
<p>No available time slots for the selected date.</p>
</>
)}
</>
)}