Nikolay Tatarinov
16bf1a1043
- Replaced the previous webapp with a new Mini App built using Next.js, improving performance and maintainability. - Updated the `.gitignore` to exclude Next.js build artifacts and node modules. - Revised documentation in `AGENTS.md`, `README.md`, and `architecture.md` to reflect the new Mini App structure and technology stack. - Enhanced Dockerfile to support the new build process for the Next.js application. - Updated CI workflow to build and test the Next.js application. - Added new configuration options for the Mini App, including `MINI_APP_SHORT_NAME` for improved deep linking. - Refactored frontend testing setup to accommodate the new structure and testing framework. - Removed legacy webapp files and dependencies to streamline the project.
67 lines
2.3 KiB
TypeScript
67 lines
2.3 KiB
TypeScript
/**
|
|
* Colored dots 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 / only child), not by indicator type, so multiple
|
|
* segments form one "pill": only the left and right ends are rounded.
|
|
*/
|
|
|
|
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 dots 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",
|
|
"[&>:only-child]:h-1.5 [&>:only-child]:min-w-[6px] [&>:only-child]:max-w-[6px] [&>:only-child]:rounded-full",
|
|
"[&>:first-child:not(:only-child)]:rounded-l-[3px]",
|
|
"[&>:last-child:not(:only-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>
|
|
);
|
|
}
|