Date Range Picker

import { useState } from "react";
import type { DateRange } from "@daypicker/react";
import { endOfDay, startOfDay, subDays } from "date-fns";
import { DateRangeSelector } from "@/components/registry/date-range-picker";

export function Example() {
  const [range, setRange] = useState(() => {
    const to = endOfDay(new Date());
    return { from: startOfDay(subDays(to, 13)), to };
  });

  return (
    <DateRangeSelector
      defaultPreset="2weeks"
      value={range}
      presets={[
        { value: "7days", label: "Últimos 7 días", daysBack: 6 },
        { value: "2weeks", label: "Últimas 2 semanas", daysBack: 13 },
        { value: "month", label: "Último mes", daysBack: 29 },
      ]}
      onDateChange={setRange}
    />
  );
}

<DateRangeSelector
  defaultPreset="30days"
  value={range}
  presets={[
    { value: "30days", label: "Último mes", daysBack: 29 },
    { value: "90days", label: "Últimos 3 meses", daysBack: 89 },
    { value: "365days", label: "Último año", daysBack: 364 },
  ]}
  onDateChange={setRange}
/>