this repo has no description
1import { cn } from "~/design-system/utils/cn";
2
3interface StatusDotProps {
4 status: "cached" | "fetching" | "idle" | "error";
5 className?: string;
6}
7
8/**
9 * Status indicator dot for showing cache/fetching state.
10 *
11 * Used in navigation and data tables to indicate:
12 * - cached: Data is available in cache (green)
13 * - fetching: Data is currently loading (amber, animated)
14 * - idle: No active request (neutral)
15 * - error: Request failed (red)
16 */
17export function StatusDot({ status, className }: StatusDotProps) {
18 return (
19 <span
20 className={cn(
21 "inline-block w-2 h-2 rounded-full shrink-0",
22 status === "cached" && [
23 "bg-(--status-cached)",
24 "shadow-[0_0_0_2px_var(--status-cached-glow)]",
25 ],
26 status === "fetching" && ["bg-(--status-fetching)", "animate-pulse-dot"],
27 status === "idle" && "bg-(--status-idle)",
28 status === "error" && [
29 "bg-(--status-error)",
30 "shadow-[0_0_0_2px_var(--status-error-glow)]",
31 ],
32 className,
33 )}
34 aria-hidden="true"
35 />
36 );
37}
38
39/**
40 * Status dot with label for accessibility
41 */
42export function StatusDotWithLabel({
43 status,
44 label,
45 className,
46}: StatusDotProps & { label: string }) {
47 return (
48 <span className={cn("inline-flex items-center gap-2", className)}>
49 <StatusDot status={status} />
50 <span className="text-sm font-mono text-(--text-muted)">{label}</span>
51 </span>
52 );
53}