mobile improvements

app/home/(user)/_components/booking/booking-container.tsx

@@ -1,51 +1,16 @@
 'use client';
 
-import { isBefore, isSameDay } from 'date-fns';
-import { uniq } from 'lodash';
-
-import { Calendar } from '@kit/ui/shadcn/calendar';
-import { Card } from '@kit/ui/shadcn/card';
-
 import { ServiceCategory } from '../service-categories';
-import { BookingProvider, useBooking } from './booking.provider';
+import BookingCalendar from './booking-calendar';
+import { BookingProvider } from './booking.provider';
 import LocationSelector from './location-selector';
 import ServiceSelector from './service-selector';
 import TimeSlots from './time-slots';
 
-const BookingCalendar = () => {
-  const { selectedDate, setSelectedDate, isLoadingTimeSlots, timeSlots } =
-    useBooking();
-  const availableDates = uniq(timeSlots?.map((timeSlot) => timeSlot.StartTime));
-
-  return (
-    <Card className="mb-4">
-      <Calendar
-        mode="single"
-        selected={selectedDate}
-        onSelect={setSelectedDate}
-        disabled={(date) => {
-          const today = new Date();
-          today.setHours(0, 0, 0, 0);
-          return (
-            isBefore(date, today) ||
-            !availableDates.some((dateWithBooking) =>
-              isSameDay(date, dateWithBooking),
-            )
-          );
-        }}
-        className="rounded-md border"
-        {...(isLoadingTimeSlots && {
-          className: 'rounded-md border opacity-50 pointer-events-none',
-        })}
-      />
-    </Card>
-  );
-};
-
 const BookingContainer = ({ category }: { category: ServiceCategory }) => {
   return (
     <BookingProvider category={category}>
-      <div className="flex max-h-full flex-row gap-6">
+      <div className="xs:flex-row flex max-h-full flex-col gap-6">
         <div className="flex flex-col">
           <ServiceSelector products={category.products} />
           <BookingCalendar />