104 lines
3.5 KiB
JavaScript
104 lines
3.5 KiB
JavaScript
'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 <Preloader />;
|
|
}
|
|
|
|
return (
|
|
<div className={`flex flex-col min-h-screen ${darkMode ? 'dark bg-gray-900' : ''}`}>
|
|
<Head>
|
|
<title>Book Appointment</title>
|
|
<meta charSet="UTF-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
|
|
/>
|
|
<meta httpEquiv="X-UA-Compatible" content="ie=edge" />
|
|
</Head>
|
|
|
|
<div className="flex h-screen overflow-hidden">
|
|
<div className="relative flex flex-col flex-1 overflow-x-hidden overflow-y-auto">
|
|
<Overlay />
|
|
|
|
<div className="flex bg-white dark:bg-gray-800 shadow-sm sticky top-0 z-50 w-full">
|
|
<Header />
|
|
</div>
|
|
|
|
<main>
|
|
<div className="p-4 mx-auto max-w-4xl md:p-6">
|
|
<h2 className="text-2xl font-semibold mb-6 text-gray-800 dark:text-white">Book Appointment</h2>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1.5">
|
|
Full Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
placeholder="John Doe"
|
|
value={name}
|
|
onChange={(e) => 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
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
className="w-full rounded-lg bg-blue-700 px-5 py-3.5 text-sm font-medium text-white hover:bg-blue-800 transition duration-200"
|
|
>
|
|
Submit
|
|
</button>
|
|
</form>
|
|
|
|
<div className="mt-6 text-center text-sm text-gray-600 dark:text-gray-300">
|
|
Note: Token booking is available for today's date only.
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |