Nikolay Tatarinov
8bf92bd4a1
- Revised comments in DayIndicators component and test files to better describe the functionality of colored segments and rounding behavior. - Updated test descriptions to reflect changes in rendering logic for single and multiple segments. - Adjusted class names in the component and tests to ensure correct application of rounded styles based on segment positions.
66 lines
2.3 KiB
TypeScript
66 lines
2.3 KiB
TypeScript
/**
|
|
* Colored segments (pill bar) for calendar day: duty (green), unavailable (amber), vacation (blue), events (accent).
|
|
* Ported from webapp calendar day-indicator markup and markers.css.
|
|
*
|
|
* Rounding is position-based (first / last segment), so one or multiple segments always form a pill:
|
|
* first segment gets left rounding, last segment gets right rounding (single segment gets both).
|
|
*/
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export interface DayIndicatorsProps {
|
|
/** Number of duty slots this day. */
|
|
dutyCount: number;
|
|
/** Number of unavailable slots. */
|
|
unavailableCount: number;
|
|
/** Number of vacation slots. */
|
|
vacationCount: number;
|
|
/** Whether the day has external calendar events (e.g. holiday). */
|
|
hasEvents: boolean;
|
|
/** When true (e.g. today cell), use darker segments for contrast. */
|
|
isToday?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
export function DayIndicators({
|
|
dutyCount,
|
|
unavailableCount,
|
|
vacationCount,
|
|
hasEvents,
|
|
isToday = false,
|
|
className,
|
|
}: DayIndicatorsProps) {
|
|
const hasAny = dutyCount > 0 || unavailableCount > 0 || vacationCount > 0 || hasEvents;
|
|
if (!hasAny) return null;
|
|
|
|
const dotClass = (variant: "duty" | "unavailable" | "vacation" | "events") =>
|
|
cn(
|
|
"min-w-0 flex-1 h-1 max-h-1.5",
|
|
variant === "duty" && "bg-duty",
|
|
variant === "unavailable" && "bg-unavailable",
|
|
variant === "vacation" && "bg-vacation",
|
|
variant === "events" && "bg-accent",
|
|
isToday && variant === "duty" && "bg-[var(--indicator-today-duty)]",
|
|
isToday && variant === "unavailable" && "bg-[var(--indicator-today-unavailable)]",
|
|
isToday && variant === "vacation" && "bg-[var(--indicator-today-vacation)]",
|
|
isToday && variant === "events" && "bg-[var(--indicator-today-events)]"
|
|
);
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex w-[65%] justify-center gap-0.5 mt-1.5",
|
|
"[&>:first-child]:rounded-l-[3px]",
|
|
"[&>:last-child]:rounded-r-[3px]",
|
|
className
|
|
)}
|
|
aria-hidden
|
|
>
|
|
{dutyCount > 0 && <span className={dotClass("duty")} />}
|
|
{unavailableCount > 0 && <span className={dotClass("unavailable")} />}
|
|
{vacationCount > 0 && <span className={dotClass("vacation")} />}
|
|
{hasEvents && <span className={dotClass("events")} />}
|
|
</div>
|
|
);
|
|
}
|