1"use client";2import clsx from "clsx";3import { daysAgo, today } from "@/lib/format";4import { Field } from "./ui";56interface Props {7 start: string;8 end: string;9 onChange: (start: string, end: string) => void;10 presets?: number[]; // days11 className?: string;12}1314export function DateRange({ start, end, onChange, presets = [7, 30, 90, 120, 365], className }: Props) {15 return (16 <div className={clsx("flex flex-wrap items-end gap-2", className)}>17 <Field label="Start" className="w-[10.5rem]">18 <input type="date" className="input" value={start} max={end || undefined} onChange={(e) => onChange(e.target.value, end)} />19 </Field>20 <Field label="End" className="w-[10.5rem]">21 <input type="date" className="input" value={end} min={start || undefined} onChange={(e) => onChange(start, e.target.value)} />22 </Field>23 <div className="flex flex-wrap gap-1">24 {presets.map((d) => {25 const active = start === daysAgo(d) && end === today();26 return (27 <button key={d} type="button" className={clsx("btn btn-sm", active && "border-accent bg-accent-soft text-accent-ink")} onClick={() => onChange(daysAgo(d), today())}>28 {d} d29 </button>30 );31 })}32 </div>33 </div>34 );35}36