calendar-12

1"use client"
2 
3import * as React from "react"
4import { type DateRange } from "react-day-picker"
5import { enUS, es } from "react-day-picker/locale"
6 
7import { Calendar } from "@/registry/new-york/ui/calendar"
8import {
9  Card,
10  CardContent,
11  CardDescription,
12  CardHeader,
13  CardTitle,
14} from "@/registry/new-york/ui/card"
15import {
16  Select,
17  SelectContent,
18  SelectItem,
19  SelectTrigger,
20  SelectValue,
21} from "@/registry/new-york/ui/select"
22 
23const localizedStrings = {
24  en: {
25    title: "Book an appointment",
26    description: "Select the dates for your appointment",
27  },
28  es: {
29    title: "Reserva una cita",
30    description: "Selecciona las fechas para tu cita",
31  },
32} as const
33 
34export default function Calendar12() {
35  const [locale, setLocale] =
36    React.useState<keyof typeof localizedStrings>("es")
37  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
38    from: new Date(2025, 8, 9),
39    to: new Date(2025, 8, 17),
40  })
41 
42  return (
43    <Card>
44      <CardHeader className="relative border-b">
45        <CardTitle>{localizedStrings[locale].title}</CardTitle>
46        <CardDescription>
47          {localizedStrings[locale].description}
48        </CardDescription>
49        <Select
50          value={locale}
51          onValueChange={(value) =>
52            setLocale(value as keyof typeof localizedStrings)
53          }
54        >
55          <SelectTrigger className="absolute right-4 top-4 w-[100px]">
56            <SelectValue placeholder="Language" />
57          </SelectTrigger>
58          <SelectContent align="end">
59            <SelectItem value="es">Español</SelectItem>
60            <SelectItem value="en">English</SelectItem>
61          </SelectContent>
62        </Select>
63      </CardHeader>
64      <CardContent className="pt-4">
65        <Calendar
66          mode="range"
67          selected={dateRange}
68          onSelect={setDateRange}
69          defaultMonth={dateRange?.from}
70          numberOfMonths={2}
71          locale={locale === "es" ? es : enUS}
72          className="bg-transparent p-0"
73          buttonVariant="outline"
74        />
75      </CardContent>
76    </Card>
77  )
78}