Universal Date Picker

import { UniversalDatePicker } from "@/components/ruixen/universal-date-picker";
import { useState } from "react";
import { DateRange } from "react-day-picker";
 
export default function App() {
  const [selectedSingle, setSelectedSingle] = useState<Date>();
  const [selectedRange, setSelectedRange] = useState<DateRange>();
 
  return (
    <div className="space-y-6">
      <UniversalDatePicker
        mode="single"
        selected={selectedSingle}
        onChange={(value) => {
          if (value instanceof Date || value === undefined) {
            setSelectedSingle(value);
          }
        }}
        label="Pick a single date"
      />
 
      <UniversalDatePicker
        mode="range"
        selected={selectedRange}
        onChange={(value) => {
          if (!value || ("from" in value && "to" in value)) {
            setSelectedRange(value as DateRange);
          }
        }}
        label="Pick a date range"
      />
    </div>
  );
}