80 lines
3.5 KiB
TypeScript
80 lines
3.5 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
|
import { DayPicker, getDefaultClassNames, type DayButtonProps } from 'react-day-picker';
|
|
import { ru } from 'react-day-picker/locale';
|
|
|
|
import { cn } from '@/lib/utils';
|
|
import { buttonVariants } from '@/components/ui/button';
|
|
|
|
function CalendarDayButton({ className, day, modifiers, ...props }: DayButtonProps) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
className={cn(
|
|
buttonVariants({ variant: 'ghost' }),
|
|
'h-9 w-9 p-0 font-normal aria-selected:opacity-100',
|
|
modifiers.selected && 'bg-[#111827] text-white hover:bg-[#111827] hover:text-white',
|
|
modifiers.today && !modifiers.selected && 'bg-[#f4f5f8] text-[#111827]',
|
|
modifiers.outside && 'text-[#a8adbc] opacity-50',
|
|
modifiers.disabled && 'text-[#a8adbc] opacity-50',
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function Calendar({ className, classNames, showOutsideDays = true, ...props }: React.ComponentProps<typeof DayPicker>) {
|
|
const defaults = getDefaultClassNames();
|
|
|
|
return (
|
|
<DayPicker
|
|
showOutsideDays={showOutsideDays}
|
|
locale={ru}
|
|
className={cn('p-3', className)}
|
|
classNames={{
|
|
root: cn('rdp-root', defaults.root),
|
|
months: cn('flex flex-col gap-4 sm:flex-row', defaults.months),
|
|
month: cn('flex flex-col gap-4', defaults.month),
|
|
month_caption: cn('flex justify-center pt-1 relative items-center', defaults.month_caption),
|
|
caption_label: cn('text-sm font-medium capitalize', defaults.caption_label),
|
|
dropdowns: cn('flex items-center justify-center gap-2', defaults.dropdowns),
|
|
dropdown_root: cn('relative inline-flex items-center gap-1', defaults.dropdown_root),
|
|
dropdown: defaults.dropdown,
|
|
months_dropdown: defaults.months_dropdown,
|
|
years_dropdown: defaults.years_dropdown,
|
|
nav: cn('flex items-center gap-1', defaults.nav),
|
|
button_previous: cn(
|
|
buttonVariants({ variant: 'ghost' }),
|
|
'absolute left-1 h-7 w-7 bg-transparent p-0 opacity-70 hover:opacity-100',
|
|
defaults.button_previous
|
|
),
|
|
button_next: cn(
|
|
buttonVariants({ variant: 'ghost' }),
|
|
'absolute right-1 h-7 w-7 bg-transparent p-0 opacity-70 hover:opacity-100',
|
|
defaults.button_next
|
|
),
|
|
month_grid: cn('w-full border-collapse space-y-1', defaults.month_grid),
|
|
weekdays: cn('flex', defaults.weekdays),
|
|
weekday: cn('text-[#667085] rounded-md w-9 font-normal text-[0.8rem]', defaults.weekday),
|
|
week: cn('flex w-full mt-2', defaults.week),
|
|
day: cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20', defaults.day),
|
|
day_button: cn('h-9 w-9 p-0 font-normal aria-selected:opacity-100', defaults.day_button),
|
|
selected: cn('bg-[#111827] text-white hover:bg-[#111827] hover:text-white focus:bg-[#111827] focus:text-white', defaults.selected),
|
|
today: cn('bg-[#f4f5f8] text-[#111827]', defaults.today),
|
|
outside: cn('text-[#a8adbc] opacity-50', defaults.outside),
|
|
disabled: cn('text-[#a8adbc] opacity-50', defaults.disabled),
|
|
hidden: cn('invisible', defaults.hidden),
|
|
...classNames
|
|
}}
|
|
components={{
|
|
Chevron: ({ orientation }) => (orientation === 'left' ? <ChevronLeft className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />),
|
|
DayButton: CalendarDayButton
|
|
}}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|