use checkboxes for tags

package.json

@@ -18,15 +18,19 @@
 		"@radix-ui/react-checkbox": "^1.0.4",
 		"@radix-ui/react-label": "^2.0.2",
 		"@radix-ui/react-menubar": "^1.0.4",
+		"@radix-ui/react-popover": "^1.0.7",
+		"@radix-ui/react-select": "^2.0.0",
 		"@radix-ui/react-slot": "^1.0.2",
 		"@radix-ui/react-toggle": "^1.0.3",
 		"@radix-ui/react-toggle-group": "^1.0.4",
 		"@tanstack/react-router": "^1.29.2",
 		"@tanstack/router-devtools": "^1.29.2",
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.1.0",
+		"date-fns": "^3.6.0",
 		"lucide-react": "^0.363.0",
 		"react": "^18.2.0",
+		"react-day-picker": "^8.10.1",
 		"react-dom": "^18.2.0",
 		"react-hook-form": "^7.51.3",
 		"react-router-dom": "^6.22.3",

src/components/DatePickerForm.jsx

@@ -0,0 +1,102 @@
+"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";
+import { TimePickerDemo } from "./time-picker-demo";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/components/ui/form";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+import { toast } from "@/components/ui/use-toast";
+
+const formSchema = z.object({
+  dateTime: z.date(),
+});
+
+
+
+export function DateTimePickerForm() {
+  const form = useForm({
+    resolver: zodResolver(formSchema),
+  });
+
+  function onSubmit(data) {
+    toast({
+      title: "You submitted the following values:",
+      description: (
+        <pre>
+          <code>{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    });
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        className="flex items-end gap-4 justify-center"
+        onSubmit={form.handleSubmit(onSubmit)}
+      >
+        <FormField
+          control={form.control}
+          name="dateTime"
+          render={({ field }) => (
+            <FormItem className="flex flex-col">
+              <FormLabel className="text-left">DateTime</FormLabel>
+              <Popover>
+                <FormControl>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      className={cn(
+                        "w-[280px] justify-start text-left font-normal",
+                        !field.value && "text-muted-foreground"
+                      )}
+                    >
+                      <CalendarIcon className="mr-2 h-4 w-4" />
+                      {field.value ? (
+                        format(field.value, "PPP HH:mm:ss")
+                      ) : (
+                        <span>Pick a date</span>
+                      )}
+                    </Button>
+                  </PopoverTrigger>
+                </FormControl>
+                <PopoverContent className="w-auto p-0">
+                  <Calendar
+                    mode="single"
+                    selected={field.value}
+                    onSelect={field.onChange}
+                    initialFocus
+                  />
+                  <div className="p-3 border-t border-border">
+                    <TimePickerDemo
+                      setDate={field.onChange}
+                      date={field.value}
+                    />
+                  </div>
+                </PopoverContent>
+              </Popover>
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  );
+}

src/components/DateTimePicker.jsx

@@ -0,0 +1,47 @@
+"use client";
+
+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";
+import { TimePickerDemo } from "@/components/DateTimePickerDemo";
+
+export function DateTimePicker() {
+  const [date, setDate] = React.useState(new Date());
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant={"outline"}
+          className={cn(
+            "w-[280px] justify-start text-left font-normal",
+            !date && "text-muted-foreground"
+          )}
+        >
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          {date ? format(date, "PPP HH:mm:ss") : <span>Pick a date</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          initialFocus
+        />
+        <div className="p-3 border-t border-border">
+          <TimePickerDemo setDate={setDate} date={date} />
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}