booking form validation and data types

apps/web/components/TimeSlotSelector.tsx

@@ -0,0 +1,53 @@
+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;