Nikolay Tatarinov
43cd3bbd7d
- Refactored layout structure in multiple components to enhance consistency and maintainability by introducing outer and inner wrapper classes. - Updated the `MonthNavHeader` component for shared month navigation functionality, improving code reuse. - Adjusted padding and margin properties in various components to ensure a cohesive design and better responsiveness. - Removed unnecessary padding from certain elements to streamline the layout and improve visual clarity.
52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
/**
|
|
* Calendar header: month title, prev/next navigation, weekday labels.
|
|
* Replaces the header from webapp index.html and calendar.js month title.
|
|
*/
|
|
|
|
"use client";
|
|
|
|
import { useTranslation } from "@/i18n/use-translation";
|
|
import { cn } from "@/lib/utils";
|
|
import { MonthNavHeader } from "@/components/calendar/MonthNavHeader";
|
|
|
|
export interface CalendarHeaderProps {
|
|
/** Currently displayed month (used for title). */
|
|
month: Date;
|
|
/** Whether month navigation is disabled (e.g. during loading). */
|
|
disabled?: boolean;
|
|
onPrevMonth: () => void;
|
|
onNextMonth: () => void;
|
|
className?: string;
|
|
}
|
|
|
|
export function CalendarHeader({
|
|
month,
|
|
disabled = false,
|
|
onPrevMonth,
|
|
onNextMonth,
|
|
className,
|
|
}: CalendarHeaderProps) {
|
|
const { weekdayLabels } = useTranslation();
|
|
const labels = weekdayLabels();
|
|
|
|
return (
|
|
<header className={cn("flex flex-col", className)}>
|
|
<MonthNavHeader
|
|
month={month}
|
|
disabled={disabled}
|
|
onPrevMonth={onPrevMonth}
|
|
onNextMonth={onNextMonth}
|
|
ariaLive
|
|
className="mb-3"
|
|
/>
|
|
<div className="grid grid-cols-7 gap-0.5 mb-1.5 text-center text-[0.75rem] text-muted">
|
|
{labels.map((label, i) => (
|
|
<span key={i} aria-hidden>
|
|
{label}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|