import React, { useState } from 'react'; import { Input } from '@/components/ui/input'; import { Button } from '@/components/ui/button'; import { Calendar } from '@/components/ui/calendar'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; const AppointmentBookingApp = () => { const [name, setName] = useState(''); const [email, setEmail] = useState(''); const [phone, setPhone] = useState(''); const [selectedDate, setSelectedDate] = useState(null); const [selectedTime, setSelectedTime] = useState(''); const [selectedService, setSelectedService] = useState(''); const [bookings, setBookings] = useState([]); const [error, setError] = useState(''); // Format date without external library const formatDate = (date) => { if (!date) return ''; return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }); }; // Available time slots const timeSlots = [ '9:00 AM', '10:00 AM', '11:00 AM', '1:00 PM', '2:00 PM', '3:00 PM', '4:00 PM', '5:00 PM' ]; // Available services const services = [ 'Consultation', 'Checkup', 'Treatment', 'Follow-up' ]; const handleBookAppointment = () => { // Validate inputs if (!name || !email || !phone || !selectedDate || !selectedTime || !selectedService) { setError('Please fill in all fields'); return; } // Basic email validation const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(email)) { setError('Please enter a valid email address'); return; } // Basic phone validation const phoneRegex = /^[0-9]{10}$/; if (!phoneRegex.test(phone.replace(/\D/g, ''))) { setError('Please enter a valid 10-digit phone number'); return; } // Create booking object const newBooking = { id: Date.now(), name, email, phone, date: formatDate(selectedDate), time: selectedTime, service: selectedService }; // Add booking and reset form setBookings([...bookings, newBooking]); setError(''); // Reset form fields setName(''); setEmail(''); setPhone(''); setSelectedDate(null); setSelectedTime(''); setSelectedService(''); }; return (

Book an Appointment

{/* Personal Information */}

setName(e.target.value)} /> setEmail(e.target.value)} /> setPhone(e.target.value)} /> {/* Service Selection */} {/* Calendar */} {/* Time Slot Selection */} {/* Error Message */} {error && (

{error}

)} {/* Book Appointment Button */}

{/* Booking List */} {bookings.length > 0 && (

Your Bookings

{bookings.map((booking) => (

Name: {booking.name}

Service: {booking.service}

Date: {booking.date}

Time: {booking.time}

))}

)}

); }; export default AppointmentBookingApp;

Book online now