Switch to version 2: added src/app/appointments/page.tsx

src/app/appointments/page.tsx

@@ -0,0 +1,274 @@
+"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>
+  );
+}