Dental Care

components/calendar/calendar-12.tsx

@@ -0,0 +1,81 @@
+"use client"
+
+import * as React from "react"
+import { type DateRange } from "react-day-picker"
+import { enUS, es } from "react-day-picker/locale"
+
+import { Calendar } from "@/components/ui/calendar"
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+
+const localizedStrings = {
+  en: {
+    title: "Book an appointment",
+    description: "Select the dates for your appointment",
+  },
+  es: {
+    title: "Reserva una cita",
+    description: "Selecciona las fechas para tu cita",
+  },
+} as const
+
+export default function Calendar12() {
+  const [locale, setLocale] =
+    React.useState<keyof typeof localizedStrings>("es")
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(2025, 8, 9),
+    to: new Date(2025, 8, 17),
+  })
+
+  return (
+    <Card>
+      <CardHeader className="border-b">
+        <CardTitle>{localizedStrings[locale].title}</CardTitle>
+        <CardDescription>
+          {localizedStrings[locale].description}
+        </CardDescription>
+        <CardAction>
+          <Select
+            value={locale}
+            onValueChange={(value) =>
+              setLocale(value as keyof typeof localizedStrings)
+            }
+          >
+            <SelectTrigger className="w-[100px]">
+              <SelectValue placeholder="Language" />
+            </SelectTrigger>
+            <SelectContent align="end">
+              <SelectItem value="es">Español</SelectItem>
+              <SelectItem value="en">English</SelectItem>
+            </SelectContent>
+          </Select>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        <Calendar
+          mode="range"
+          selected={dateRange}
+          onSelect={setDateRange}
+          defaultMonth={dateRange?.from}
+          numberOfMonths={2}
+          locale={locale === "es" ? es : enUS}
+          className="bg-transparent p-0"
+          buttonVariant="outline"
+        />
+      </CardContent>
+    </Card>
+  )
+}

components/calendar/calendar-14.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/components/ui/calendar"
+
+export default function Calendar14() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(2025, 5, 12)
+  )
+  const bookedDates = Array.from(
+    { length: 12 },
+    (_, i) => new Date(2025, 5, 15 + i)
+  )
+
+  return (
+    <Calendar
+      mode="single"
+      defaultMonth={date}
+      selected={date}
+      onSelect={setDate}
+      disabled={bookedDates}
+      modifiers={{
+        booked: bookedDates,
+      }}
+      modifiersClassNames={{
+        booked: "[&>button]:line-through opacity-100",
+      }}
+      className="rounded-lg border shadow-sm"
+    />
+  )
+}