first commit

apps/web/src/components/ui/date-picker.tsx

@@ -0,0 +1,59 @@
+"use client"
+
+import { format } from "date-fns"
+import { Calendar as CalendarIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Calendar } from "@/components/ui/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+
+interface DatePickerProps {
+  date?: Date
+  onDateChange?: (date: Date | undefined) => void
+  placeholder?: string
+  className?: string
+  disabled?: boolean
+}
+
+export function DatePicker({
+  date,
+  onDateChange,
+  placeholder = "Pick a date",
+  className,
+  disabled = false,
+}: DatePickerProps) {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          data-empty={!date}
+          className={cn(
+            "data-[empty=true]:text-muted-foreground w-[280px] justify-start text-left font-normal",
+            className
+          )}
+          disabled={disabled}
+        >
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          {date ? format(date, "PPP") : <span>{placeholder}</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0 rounded-md border bg-background shadow-md">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={onDateChange}
+          captionLayout="dropdown"
+          fromYear={1990}
+          toYear={2030}
+          initialFocus
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}