8-bit Date Picker

1"use client";
2 
3import { format } from "date-fns";
4import { Calendar as CalendarIcon } from "lucide-react";
5import { type HTMLAttributes, useState } from "react";
6import { Button } from "@/components/ui/8bit/button";
7import { Calendar } from "@/components/ui/8bit/calendar";
8import {
9  Popover,
10  PopoverContent,
11  PopoverTrigger,
12} from "@/components/ui/8bit/popover";
13import { cn } from "@/lib/utils";
14 
15export function DatePicker({ className }: HTMLAttributes<HTMLDivElement>) {
16  const [date, setDate] = useState<Date>();
17 
18  return (
19    <Popover>
20      <PopoverTrigger asChild>
21        <Button
22          className={cn(
23            "w-full max-w-[310px] justify-start text-left font-normal",
24            !date && "text-muted-foreground",
25            className
26          )}
27          variant={"outline"}
28        >
29          <CalendarIcon className="mr-2 size-4" />
30          <span className="truncate">
31            {date ? format(date, "PPP") : <span>Pick a date</span>}
32          </span>
33        </Button>
34      </PopoverTrigger>
35      <PopoverContent className="w-full p-0">
36        <Calendar
37          className="border-y-0"
38          mode="single"
39          onSelect={setDate}
40          selected={date}
41        />
42      </PopoverContent>
43    </Popover>
44  );
45}