Date Picker

Copyimport { format } from 'date-fns'
import { Calendar as CalendarIcon } from 'lucide-react'
 
import * as React from 'react'
 
import { Button } from '@/components/ui/button'
import { Calendar } from '@/components/ui/calendar'
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/ui/popover'

Copyconst [date, setDate] = React.useState<Date>()

Copy<Popover>
  <PopoverTrigger render={<Button variant="noShadow" className="w-[280px] justify-start text-left font-base" />}>
      <CalendarIcon />
      {date ? format(date, "PPP") : <span>Pick a date</span>}
    </PopoverTrigger>
  <PopoverContent className="w-auto border-0! p-0">
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      autoFocus
    />
  </PopoverContent>
</Popover>