From b3907697a0bbff00d37aaab8c8dfaea607170cb9 Mon Sep 17 00:00:00 2001
From: Mathis <avnyr@yidhra.fr>
Date: Wed, 12 Jun 2024 15:00:05 +0200
Subject: [PATCH] feat(ui): add DatePicker component

A new DatePicker component has been added to the UI components directory. This component includes a dropdown calendar for a user-friendly date selector. It utilizes a popover triggered by a button for seamless date selection and integration.
---
 src/components/ui/date-picker.tsx | 37 +++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 src/components/ui/date-picker.tsx

diff --git a/src/components/ui/date-picker.tsx b/src/components/ui/date-picker.tsx
new file mode 100644
index 0000000..71d6df3
--- /dev/null
+++ b/src/components/ui/date-picker.tsx
@@ -0,0 +1,37 @@
+"use client";
+import { format } from "date-fns";
+import { Calendar as CalendarIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import { forwardRef } from "react";
+
+export const DatePicker = forwardRef<
+	HTMLDivElement,
+	{
+		date?: Date;
+		setDate: (date?: Date) => void;
+	}
+>(function DatePickerCmp({ date, setDate }, ref) {
+	return (
+		<Popover>
+			<PopoverTrigger asChild>
+				<Button
+					variant={"outline"}
+					className={cn(
+						"w-full justify-start text-left font-normal",
+						!date && "text-muted-foreground",
+					)}
+				>
+					<CalendarIcon className="mr-2 h-4 w-4" />
+					{date ? format(date, "PPP") : <span>Pick a date</span>}
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent className="w-auto p-0" ref={ref}>
+				<Calendar mode="single" selected={date} onSelect={setDate} initialFocus />
+			</PopoverContent>
+		</Popover>
+	);
+});