116 lines
4.3 KiB
TypeScript
116 lines
4.3 KiB
TypeScript
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; |