Date Range Picker

import { DateRangePicker, type DateRange } from '@/components/ui/date-range-picker'

export default function Example() {
  const [dateRange, setDateRange] = useState<DateRange>({
    start: null,
    end: null
  })

  return (
    <>
      {/* Basic usage */}
      <DateRangePicker
        label="Select Date Range"
        value={dateRange}
        onChange={setDateRange}
        placeholder="Choose a date range"
      />

      {/* Without presets */}
      <DateRangePicker
        label="Custom Range"
        value={dateRange}
        onChange={setDateRange}
        presets={false}
      />

      {/* With default value */}
      <DateRangePicker
        label="Reporting Period"
        value={{
          start: new Date(2024, 0, 1),
          end: new Date(2024, 0, 31)
        }}
        onChange={setDateRange}
      />
    </>
  )
}