calendar-10

1"use client"
2 
3import * as React from "react"
4 
5import { Button } from "@/registry/default/ui/button"
6import { Calendar } from "@/registry/default/ui/calendar"
7import {
8  Card,
9  CardContent,
10  CardDescription,
11  CardHeader,
12  CardTitle,
13} from "@/registry/default/ui/card"
14 
15export default function Calendar10() {
16  const [date, setDate] = React.useState<Date | undefined>(
17    new Date(2025, 5, 12)
18  )
19  const [month, setMonth] = React.useState<Date | undefined>(new Date())
20 
21  return (
22    <Card>
23      <CardHeader className="relative">
24        <CardTitle>Appointment</CardTitle>
25        <CardDescription>Find a date</CardDescription>
26        <Button
27          size="sm"
28          variant="outline"
29          className="absolute right-4 top-4"
30          onClick={() => {
31            setMonth(new Date())
32            setDate(new Date())
33          }}
34        >
35          Today
36        </Button>
37      </CardHeader>
38      <CardContent>
39        <Calendar
40          mode="single"
41          month={month}
42          onMonthChange={setMonth}
43          selected={date}
44          onSelect={setDate}
45          className="bg-transparent p-0"
46        />
47      </CardContent>
48    </Card>
49  )
50}