'use client'; import { useState, useEffect } from 'react'; import { useRouter } from 'next/navigation'; import Head from 'next/head'; import Preloader from '../../components/partials/preloaders'; import Overlay from '../../components/partials/overlay'; import Header from '../../components/partials/header'; export default function SingleBooking() { const [darkMode, setDarkMode] = useState(false); const [loaded, setLoaded] = useState(false); const [name, setName] = useState(''); const router = useRouter(); useEffect(() => { const savedDarkMode = JSON.parse(localStorage.getItem('darkMode')); if (savedDarkMode !== null) { setDarkMode(savedDarkMode); } setLoaded(true); }, []); useEffect(() => { localStorage.setItem('darkMode', JSON.stringify(darkMode)); }, [darkMode]); const handleSubmit = (e) => { e.preventDefault(); if (!name) { alert('Please enter your name'); return; } // Get current date in YYYY-MM-DD format const today = new Date(); const appointmentDate = today.toISOString().split('T')[0]; // Navigate to confirmation page with name and current date as query params router.push(`/pages/SingleBooked?name=${encodeURIComponent(name)}&date=${encodeURIComponent(appointmentDate)}`); }; if (!loaded) { return ; } return (
Book Appointment

Book Appointment

setName(e.target.value)} className="h-11 w-full rounded-lg border border-gray-300 bg-white dark:bg-gray-900 px-4 py-2.5 text-sm text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500" required />
Note: Token booking is available for today's date only.
); }