90 lines
3.2 KiB
JavaScript
90 lines
3.2 KiB
JavaScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { useTheme } from "../../context/ThemeContext";
|
|
|
|
export default function SingleBooking() {
|
|
const [name, setName] = useState('');
|
|
const router = useRouter();
|
|
const { darkMode } = useTheme();
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
|
|
if (!name) {
|
|
alert('Please enter your name');
|
|
return;
|
|
}
|
|
|
|
const today = new Date();
|
|
const appointmentDate = today.toISOString().split('T')[0];
|
|
router.push(`/pages/SingleBooked?name=${encodeURIComponent(name)}&date=${encodeURIComponent(appointmentDate)}`);
|
|
};
|
|
|
|
// Handle theme loading state (same as dashboard)
|
|
if (darkMode === undefined) {
|
|
return (
|
|
<div className="flex items-center justify-center min-h-screen bg-white dark:bg-gray-900">
|
|
<div className="text-center">
|
|
<div className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto ${
|
|
darkMode === true ? 'border-gray-100' : 'border-gray-900'
|
|
}`}></div>
|
|
<p className={`mt-4 text-lg font-semibold ${
|
|
darkMode === true ? 'text-gray-100' : 'text-gray-900'
|
|
}`}>
|
|
Loading...
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={`min-h-screen transition-colors duration-300 ${
|
|
darkMode ? 'dark bg-gray-900' : 'bg-white'
|
|
}`}>
|
|
<div className="flex h-screen overflow-hidden">
|
|
<div className="relative flex flex-col flex-1 overflow-x-hidden overflow-y-auto">
|
|
<main>
|
|
<div className="p-4 mx-auto max-w-4xl md:p-6">
|
|
<h2 className="text-2xl font-semibold text-gray-800 dark:text-gray-100">
|
|
Book Appointment
|
|
</h2>
|
|
<p className={`mb-6 dark:text-gray-300`}>
|
|
Date: {new Date().toLocaleDateString('en-GB')}
|
|
</p>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 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 dark:border-gray-600 bg-white dark:bg-gray-800 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-600 dark:bg-blue-700 px-5 py-3.5 text-sm font-medium text-white hover:bg-blue-700 dark:hover:bg-blue-800 transition duration-200"
|
|
>
|
|
Submit
|
|
</button>
|
|
</form>
|
|
|
|
<div className="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">
|
|
Note: Token booking is available for today's date only.
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |