Date Picker

1"use client";
2 
3import * as React from "react";
4import { format } from "date-fns";
5import { CalendarIcon } from "lucide-react";
6 
7import { cn } from "@/registry/optics/lib/utils";
8import { Button } from "@/registry/optics/button";
9import { Calendar } from "@/registry/optics/calendar";
10import {
11	Popover,
12	PopoverContent,
13	PopoverTrigger,
14} from "@/registry/optics/popover";
15 
16function DatePicker({
17	date = null,
18	onDateChange = () => {},
19	placeholder = "Pick a date",
20	variant = "outline",
21	className = "",
22	...props
23}) {
24	return (
25		<Popover>
26			<PopoverTrigger
27				render={
28					<Button
29						variant={variant || "outline"}
30						className={cn(
31							"w-[240px] justify-start text-left font-normal",
32							!date && "text-muted-foreground",
33							className,
34						)}
35						aria-label="Open date picker"
36						{...props}
37					>
38						<CalendarIcon />
39						{date ? format(date, "PPP") : <span>{placeholder}</span>}
40					</Button>
41				}
42			/>
43			<PopoverContent className="w-auto p-0" align="start">
44				<Calendar
45					mode="single"
46					selected={date}
47					onSelect={onDateChange}
48					initialFocus
49				/>
50			</PopoverContent>
51		</Popover>
52	);
53}
54 
55DatePicker.displayName = "DatePicker";
56 
57export { DatePicker };