Move to TanStack Start from Next.js (#184)

web/app/components/custom/date-picker.tsx

@@ -0,0 +1,57 @@
+import * as React from "react"
+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 | undefined
+  onDateChange: (date: Date | undefined) => void
+  className?: string
+}
+
+export function DatePicker({ date, onDateChange, className }: DatePickerProps) {
+  const [open, setOpen] = React.useState(false)
+
+  const selectDate = (selectedDate: Date | undefined) => {
+    onDateChange(selectedDate)
+    setOpen(false)
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant={"outline"}
+          className={cn(
+            "w-[240px] justify-start text-left font-normal",
+            !date && "text-muted-foreground",
+            className,
+          )}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <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"
+        align="start"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={selectDate}
+          initialFocus
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}