bender/4ae38453-e8f1-43fd-b31c-0ddac4af8a0d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Switch to version 1: remove src/app/appointments/page.tsx

Browse Source
This commit is contained in:
bender
2026-03-11 11:21:32 +00:00
parent 72d8e3fa0a
commit 6b4e9bb6bc
1 changed files with 0 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

274
src/app/appointments/page.tsx
View File

@@ -1,274 +0,0 @@
"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Calendar, Check, Clock, X } from 'lucide-react';
import { useState } from 'react';
interface TimeSlot {
id: string;
time: string;
status: 'available' | 'booked' | 'unavailable';
}
interface DayInfo {
date: string;
dayName: string;
slots: TimeSlot[];
}
const mockCalendarData: DayInfo[] = [
{
date: '2025-01-20',
dayName: 'Monday',
slots: [
{ id: '1', time: '09:00 AM', status: 'available' },
{ id: '2', time: '10:00 AM', status: 'booked' },
{ id: '3', time: '11:00 AM', status: 'available' },
{ id: '4', time: '12:00 PM', status: 'unavailable' },
{ id: '5', time: '01:00 PM', status: 'available' },
{ id: '6', time: '02:00 PM', status: 'booked' },
{ id: '7', time: '03:00 PM', status: 'available' },
{ id: '8', time: '04:00 PM', status: 'available' },
]
},
{
date: '2025-01-21',
dayName: 'Tuesday',
slots: [
{ id: '9', time: '09:00 AM', status: 'available' },
{ id: '10', time: '10:00 AM', status: 'available' },
{ id: '11', time: '11:00 AM', status: 'booked' },
{ id: '12', time: '12:00 PM', status: 'booked' },
{ id: '13', time: '01:00 PM', status: 'available' },
{ id: '14', time: '02:00 PM', status: 'available' },
{ id: '15', time: '03:00 PM', status: 'unavailable' },
{ id: '16', time: '04:00 PM', status: 'booked' },
]
},
{
date: '2025-01-22',
dayName: 'Wednesday',
slots: [
{ id: '17', time: '09:00 AM', status: 'unavailable' },
{ id: '18', time: '10:00 AM', status: 'available' },
{ id: '19', time: '11:00 AM', status: 'available' },
{ id: '20', time: '12:00 PM', status: 'available' },
{ id: '21', time: '01:00 PM', status: 'booked' },
{ id: '22', time: '02:00 PM', status: 'available' },
{ id: '23', time: '03:00 PM', status: 'available' },
{ id: '24', time: '04:00 PM', status: 'unavailable' },
]
},
{
date: '2025-01-23',
dayName: 'Thursday',
slots: [
{ id: '25', time: '09:00 AM', status: 'available' },
{ id: '26', time: '10:00 AM', status: 'booked' },
{ id: '27', time: '11:00 AM', status: 'available' },
{ id: '28', time: '12:00 PM', status: 'available' },
{ id: '29', time: '01:00 PM', status: 'available' },
{ id: '30', time: '02:00 PM', status: 'unavailable' },
{ id: '31', time: '03:00 PM', status: 'available' },
{ id: '32', time: '04:00 PM', status: 'booked' },
]
},
{
date: '2025-01-24',
dayName: 'Friday',
slots: [
{ id: '33', time: '09:00 AM', status: 'available' },
{ id: '34', time: '10:00 AM', status: 'available' },
{ id: '35', time: '11:00 AM', status: 'booked' },
{ id: '36', time: '12:00 PM', status: 'available' },
{ id: '37', time: '01:00 PM', status: 'unavailable' },
{ id: '38', time: '02:00 PM', status: 'available' },
{ id: '39', time: '03:00 PM', status: 'booked' },
{ id: '40', time: '04:00 PM', status: 'available' },
]
},
];
function TimeSlotButton({ slot, onSelect }: { slot: TimeSlot; onSelect: (slot: TimeSlot) => void }) {
const getStatusClasses = () => {
switch (slot.status) {
case 'available':
return 'bg-green-500 hover:bg-green-600 text-white cursor-pointer';
case 'booked':
return 'bg-red-500 text-white cursor-not-allowed opacity-60';
case 'unavailable':
return 'bg-gray-400 text-white cursor-not-allowed opacity-50';
default:
return '';
}
};
const getStatusIcon = () => {
switch (slot.status) {
case 'available':
return <Check className="w-4 h-4" />;
case 'booked':
return <X className="w-4 h-4" />;
case 'unavailable':
return <Clock className="w-4 h-4" />;
default:
return null;
}
};
return (
<button
onClick={() => slot.status === 'available' && onSelect(slot)}
disabled={slot.status !== 'available'}
className={`px-4 py-2 rounded-lg font-medium transition-all flex items-center justify-center gap-2 ${getStatusClasses()}`}
>
{slot.time}
{getStatusIcon()}
</button>
);
}
export default function AppointmentsPage() {
const [selectedSlot, setSelectedSlot] = useState<TimeSlot | null>(null);
const [selectedDay, setSelectedDay] = useState<DayInfo | null>(mockCalendarData[0]);
const handleSlotSelect = (slot: TimeSlot) => {
setSelectedSlot(slot);
};
const availableCount = selectedDay?.slots.filter(s => s.status === 'available').length || 0;
const bookedCount = selectedDay?.slots.filter(s => s.status === 'booked').length || 0;
const unavailableCount = selectedDay?.slots.filter(s => s.status === 'unavailable').length || 0;
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="mediumSmall"
sizing="largeSizeMediumTitles"
background="floatingGradient"
cardStyle="solid"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="glass"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Radiance Beauty"
navItems={[
{ name: "Gallery", id: "gallery" },
{ name: "Services", id: "services" },
{ name: "Appointments", id: "/appointments" },
{ name: "Contact", id: "contact" }
]}
button={{ text: "Book Appointment", href: "/appointments" }}
animateOnLoad={true}
/>
</div>
<main className="min-h-screen pt-24 pb-16">
<div className="max-w-6xl mx-auto px-4 md:px-6">
{/* Header */}
<div className="text-center mb-12">
<h1 className="text-4xl md:text-5xl font-light mb-4">Appointment Availability</h1>
<p className="text-lg text-foreground/70">Browse available time slots and book your beauty session</p>
</div>
{/* Calendar Legend */}
<div className="mb-12 flex flex-wrap gap-4 justify-center">
<div className="flex items-center gap-2">
<div className="w-4 h-4 rounded bg-green-500"></div>
<span className="text-sm font-medium">Available</span>
</div>
<div className="flex items-center gap-2">
<div className="w-4 h-4 rounded bg-red-500"></div>
<span className="text-sm font-medium">Booked</span>
</div>
<div className="flex items-center gap-2">
<div className="w-4 h-4 rounded bg-gray-400"></div>
<span className="text-sm font-medium">Unavailable</span>
</div>
</div>
{/* Day Selector */}
<div className="mb-8 overflow-x-auto">
<div className="flex gap-3 pb-2">
{mockCalendarData.map((day) => (
<button
key={day.date}
onClick={() => setSelectedDay(day)}
className={`px-6 py-3 rounded-lg font-medium whitespace-nowrap transition-all ${
selectedDay?.date === day.date
? 'bg-primary-cta text-white'
: 'bg-background-accent text-foreground hover:bg-opacity-80'
}`}
>
<div className="text-sm">{day.dayName}</div>
<div className="text-xs opacity-75">{day.date}</div>
</button>
))}
</div>
</div>
{/* Time Slots Grid */}
{selectedDay && (
<div className="bg-card rounded-xl p-8 mb-8">
<div className="mb-6">
<h2 className="text-2xl font-light mb-4">Available Times - {selectedDay.dayName}, {selectedDay.date}</h2>
<div className="flex gap-6 flex-wrap text-sm">
<div>
<span className="font-medium">Available:</span>
<span className="ml-2 text-green-600">{availableCount}</span>
</div>
<div>
<span className="font-medium">Booked:</span>
<span className="ml-2 text-red-600">{bookedCount}</span>
</div>
<div>
<span className="font-medium">Unavailable:</span>
<span className="ml-2 text-gray-500">{unavailableCount}</span>
</div>
</div>
</div>
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
{selectedDay.slots.map((slot) => (
<TimeSlotButton
key={slot.id}
slot={slot}
onSelect={handleSlotSelect}
/>
))}
</div>
</div>
)}
{/* Selected Slot Info */}
{selectedSlot && (
<div className="bg-green-50 border-2 border-green-500 rounded-xl p-6 text-center">
<Check className="w-8 h-8 text-green-600 mx-auto mb-3" />
<h3 className="text-xl font-medium text-green-900 mb-2">Slot Selected</h3>
<p className="text-green-800 mb-4">
{selectedDay?.dayName}, {selectedDay?.date} at {selectedSlot.time}
</p>
<button className="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-lg font-medium transition-colors">
Confirm Booking
</button>
</div>
)}
</div>
</main>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Radiance Beauty"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "Terms & Conditions", href: "#" }}
/>
</div>
</ThemeProvider>
);
}