53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { Clock } from 'lucide-react';
|
|
|
|
interface TimeSlot {
|
|
id: string;
|
|
start_time: string;
|
|
end_time: string;
|
|
available: boolean;
|
|
}
|
|
|
|
interface TimeSlotSelectorProps {
|
|
timeSlots: TimeSlot[];
|
|
selectedTimeSlot: string;
|
|
onTimeSlotChange: (slotId: string) => void;
|
|
}
|
|
|
|
const TimeSlotSelector: React.FC<TimeSlotSelectorProps> = ({
|
|
timeSlots,
|
|
selectedTimeSlot,
|
|
onTimeSlotChange,
|
|
}) => {
|
|
return (
|
|
<div className="bg-white rounded-xl p-6 shadow-sm">
|
|
<h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
|
|
<Clock className="w-5 h-5" />
|
|
Available Times
|
|
</h2>
|
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
|
{timeSlots.map((slot) => (
|
|
<button
|
|
key={slot.id}
|
|
type="button"
|
|
disabled={!slot.available}
|
|
onClick={() => onTimeSlotChange(slot.id)}
|
|
className={`p-3 rounded-lg text-center transition-all ${
|
|
!slot.available
|
|
? 'bg-gray-100 text-gray-400 cursor-not-allowed'
|
|
: selectedTimeSlot === slot.id
|
|
? 'bg-blue-500 text-white'
|
|
: 'bg-gray-100 hover:bg-gray-200 text-gray-700'
|
|
}`}
|
|
>
|
|
<div className="font-medium">
|
|
{slot.start_time} - {slot.end_time}
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TimeSlotSelector; |