more fix and update

2026-06-24 20:15:19 +03:00
parent dcab6557d3
commit 9727cf3f35
53 changed files with 3479 additions and 494 deletions
--- a/apps/frontend/components/ui/calendar.tsx
+++ b/apps/frontend/components/ui/calendar.tsx
@@ -0,0 +1,79 @@
+'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}
+    />
+  );
+}