import { Calendar } from "@/components/ui/calendar";
import * as React from "react";
import type { DateRange } from "react-day-picker";

export function CalendarRangeDemo() {
const [range, setRange] = React.useState<DateRange | undefined>(() => {
  const from = new Date();
  const to = new Date(from);
  to.setDate(from.getDate() + 9);
  return { from, to };
});

return (
  <Calendar
    mode="range"
    defaultMonth={range?.from}
    selected={range}
    onSelect={setRange}
    numberOfMonths={2}
    className="rounded-lg border shadow-sm"
  />
);
}

import { Calendar } from "@/components/ui/calendar";
import * as React from "react";
import type { DateRange } from "react-day-picker";

export function CalendarRangePreviewDemo() {
// Only the first day picked: hover another to preview the range, click to
// commit it.
const [range, setRange] = React.useState<DateRange | undefined>(() => {
  const today = new Date();
  return { from: today, to: today };
});

return (
  <Calendar
    mode="range"
    defaultMonth={range?.from}
    selected={range}
    onSelect={setRange}
    numberOfMonths={2}
    className="rounded-lg border shadow-sm"
  />
);
}

import { Calendar } from "@/components/ui/calendar";
import * as React from "react";

export function CalendarDropdownDemo() {
const [date, setDate] = React.useState<Date | undefined>(new Date());

return (
  <Calendar
    mode="single"
    selected={date}
    onSelect={setDate}
    captionLayout="dropdown"
    className="rounded-md border shadow-sm"
  />
);
}

import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { ChevronDownIcon } from "lucide-react";
import * as React from "react";

export function CalendarPopoverDemo() {
const [open, setOpen] = React.useState(false);
const [date, setDate] = React.useState<Date | undefined>(undefined);

return (
  <div className="flex flex-col gap-3">
    <label htmlFor="date" className="px-1 font-medium text-sm">
      Date of birth
    </label>
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          id="date"
          className="w-48 justify-between font-normal"
        >
          {date ? date.toLocaleDateString() : "Select date"}
          <ChevronDownIcon />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-auto overflow-hidden p-0" align="start">
        <Calendar
          mode="single"
          selected={date}
          captionLayout="dropdown"
          onSelect={(next) => {
            setDate(next);
            setOpen(false);
          }}
        />
      </PopoverContent>
    </Popover>
  </div>
);
}