Date Picker

'use client';
 
import { Button } from '@/components/ui/button';
import { Calendar } from '@/components/ui/calendar';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import clsx from 'clsx';
import { format } from 'date-fns';
import { Calendar as CalendarIcon } from 'lucide-react';
import { useState } from 'react';
import styles from './styles.module.scss';
 
const DatePickerDemo = () => {
    const [date, setDate] = useState<Date>();
 
    return (
        <Popover>
            <PopoverTrigger asChild>
                <Button variant={'outline'} className={clsx(styles.trigger__btn, !date && styles.trigger__btn__muted)}>
                    <CalendarIcon className={styles.trigger__btn__icon} />
                    {date ? format(date, 'PPP') : <span>Pick a date</span>}
                </Button>
            </PopoverTrigger>
            <PopoverContent className={styles.popover__container}>
                <Calendar mode='single' selected={date} onSelect={setDate} initialFocus />
            </PopoverContent>
        </Popover>
    );
};
 
export default DatePickerDemo;