homeio

1"use client";
2
3import { Calendar } from "@/components/ui/calendar";
4import { PopoverShell } from "@/modules/system/components/status-bar/popover-shell";
5
6type DatePickerPopoverProps = {
7  onClose: () => void;
8  selectedDate: Date;
9  onSelectDate: (date: Date) => void;
10};
11
12export function DatePickerPopover({
13  onClose,
14  selectedDate,
15  onSelectDate,
16}: DatePickerPopoverProps) {
17  const today = new Date();
18  const isToday =
19    selectedDate.getFullYear() === today.getFullYear() &&
20    selectedDate.getMonth() === today.getMonth() &&
21    selectedDate.getDate() === today.getDate();
22
23  return (
24    <PopoverShell
25      onClose={onClose}
26      className="w-[20rem] overflow-hidden rounded-[calc(var(--radius)+0.5rem)] border-border/70 bg-popover/96 p-0 shadow-[0_24px_70px_rgba(0,0,0,0.45)] backdrop-blur-3xl"
27    >
28      <div className="border border-border/60 bg-[linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.015))] px-4 py-3 shadow-inner shadow-black/10">
29        <div className="mb-3 flex items-start justify-between gap-3 border-b border-border/50 pb-3">
30          <div>
31            <p className="text-2xs font-semibold uppercase tracking-[0.18em] text-muted-foreground/80">
32              Calendar
33            </p>
34            <p className="mt-1 text-sm font-medium text-foreground">
35              {selectedDate.toLocaleDateString("en-US", {
36                weekday: "long",
37                month: "long",
38                day: "numeric",
39              })}
40            </p>
41          </div>
42          <span className="rounded-full border border-border/60 bg-background/65 px-2.5 py-1 text-2xs font-semibold uppercase tracking-[0.16em] text-muted-foreground/85">
43            {isToday ? "Today" : selectedDate.toLocaleDateString("en-US", { year: "numeric" })}
44          </span>
45        </div>
46        <Calendar
47          mode="single"
48          navLayout="around"
49          selected={selectedDate}
50          onSelect={(date) => {
51            if (date) onSelectDate(date);
52          }}
53          className="w-full bg-transparent p-0"
54          formatters={{
55            formatWeekdayName: (date) =>
56              date.toLocaleDateString("en-US", { weekday: "short" }).slice(0, 2),
57          }}
58          classNames={{
59            root: "w-full",
60            months: "w-full",
61            month: "grid w-full grid-cols-[2rem_minmax(0,1fr)_2rem] items-center gap-x-2 gap-y-3",
62            nav: "hidden",
63            button_previous:
64              "col-start-1 row-start-1 flex size-8 shrink-0 items-center justify-center rounded-xl border border-border/60 bg-background/55 text-muted-foreground shadow-sm transition-colors hover:bg-secondary/75 hover:text-foreground",
65            button_next:
66              "col-start-3 row-start-1 flex size-8 shrink-0 items-center justify-center rounded-xl border border-border/60 bg-background/55 text-muted-foreground shadow-sm transition-colors hover:bg-secondary/75 hover:text-foreground",
67            month_caption:
68              "col-start-2 row-start-1 mb-0 flex h-8 items-center justify-center",
69            caption_label:
70              "flex items-center justify-center text-center text-base font-semibold tracking-tight text-foreground",
71            month_grid: "col-span-3 w-full border-separate border-spacing-y-1",
72            weekdays: "mb-1 grid grid-cols-7 gap-1",
73            weekday:
74              "flex h-7 items-center justify-center text-2xs font-semibold uppercase tracking-[0.08em] text-muted-foreground/75",
75            week: "mt-1 grid grid-cols-7 gap-1",
76            day: "aspect-square p-0",
77            day_button:
78              "size-9 rounded-xl border border-transparent text-sm font-medium text-foreground transition-colors hover:border-border/70 hover:bg-secondary/55 aria-selected:border-primary/30",
79            outside:
80              "text-muted-foreground/35 aria-selected:text-muted-foreground/40",
81            today:
82              "bg-secondary/70 text-foreground rounded-xl",
83          }}
84        />
85      </div>
86    </PopoverShell>
87  );
88}
89