Calendar

// owner: Sona
"use client";

import * as React from "react";
import { addDays } from "date-fns";

import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";

export default function CalendarExample() {
  const [date, setDate] = React.useState<Date | undefined>(new Date());
  const [range, setRange] = React.useState<
    { from: Date; to: Date } | undefined
  >({
    from: new Date(),
    to: addDays(new Date(), 5),
  });

  return (
    <div className="flex flex-col gap-6 lg:flex-row">
      <div>
        <p className="text-sm font-medium mb-2">Single date</p>
        <Calendar
          mode="single"
          selected={date}
          onSelect={setDate}
          className="rounded-md border"
        />
        <Button
          variant="ghost"
          size="sm"
          className="mt-2"
          onClick={() => setDate(new Date())}
        >
          Today
        </Button>
      </div>
      <div>
        <p className="text-sm font-medium mb-2">Date range</p>
        <Calendar
          mode="range"
          selected={range}
          onSelect={(value) =>
            value && setRange(value as { from: Date; to: Date })
          }
          numberOfMonths={2}
          className="rounded-md border"
        />
      </div>
    </div>
  );
}