booking form validation and data types

apps/web/components/CustomerDetails.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import { User, Users } from 'lucide-react';
+import { UseFormRegister, FieldErrors } from 'react-hook-form';
+
+interface FormData {
+  customerName: string;
+  customerEmail: string;
+  participantsCount: number;
+}
+
+interface CustomerDetailsProps {
+  register: UseFormRegister<FormData>;
+  errors: FieldErrors<FormData>;
+  participantsCount: number;
+  onParticipantsCountChange: (count: number) => void;
+}
+
+const CustomerDetails: React.FC<CustomerDetailsProps> = ({
+  register,
+  errors,
+  participantsCount,
+  onParticipantsCountChange,
+}) => {
+  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">
+        <User className="w-5 h-5" />
+        Your Details
+      </h2>
+      
+      <div className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            Full Name *
+          </label>
+          <input
+            type="text"
+            {...register('customerName', { 
+              required: 'Full name is required',
+              minLength: { value: 2, message: 'Name must be at least 2 characters' }
+            })}
+            className={`w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+              errors.customerName ? 'border-red-300' : 'border-gray-300'
+            }`}
+            placeholder="Enter your full name"
+          />
+          {errors.customerName && (
+            <p className="text-red-500 text-sm mt-1">{errors.customerName.message}</p>
+          )}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            Email Address *
+          </label>
+          <input
+            type="email"
+            {...register('customerEmail', { 
+              required: 'Email address is required',
+              pattern: {
+                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                message: 'Please enter a valid email address'
+              }
+            })}
+            className={`w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+              errors.customerEmail ? 'border-red-300' : 'border-gray-300'
+            }`}
+            placeholder="Enter your email"
+          />
+          {errors.customerEmail && (
+            <p className="text-red-500 text-sm mt-1">{errors.customerEmail.message}</p>
+          )}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2 flex items-center gap-2">
+            <Users className="w-4 h-4" />
+            Number of Participants
+          </label>
+          <div className="flex items-center justify-center bg-gray-100 rounded-lg p-1 max-w-xs">
+            <button
+              type="button"
+              onClick={() => onParticipantsCountChange(Math.max(1, participantsCount - 1))}
+              className="w-12 h-12 flex items-center justify-center rounded-lg bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-800 transition-colors"
+              disabled={participantsCount <= 1}
+            >
+              <span className="text-xl font-medium">−</span>
+            </button>
+            <div className="flex-1 text-center px-4">
+              <span className="text-xl font-semibold text-gray-900">{participantsCount}</span>
+              <div className="text-xs text-gray-500">participant{participantsCount > 1 ? 's' : ''}</div>
+            </div>
+            <button
+              type="button"
+              onClick={() => onParticipantsCountChange(Math.min(8, participantsCount + 1))}
+              className="w-12 h-12 flex items-center justify-center rounded-lg bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-800 transition-colors"
+              disabled={participantsCount >= 8}
+            >
+              <span className="text-xl font-medium">+</span>
+            </button>
+          </div>
+          <input
+            type="hidden"
+            {...register('participantsCount', { 
+              min: { value: 1, message: 'At least 1 participant required' },
+              max: { value: 8, message: 'Maximum 8 participants allowed' }
+            })}
+            value={participantsCount}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CustomerDetails;