Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | 45x 57x 57x 69x 12x 57x 69x 81x 6x 87x 2x 6x 4x 6x 14x 14x 28x 6x 5x 1x 3x 66x 66x 66x 58x 58x | import { AlertCircle } from "lucide-react";
import { Badge } from "@/ahuora-design-system/ui/badge";
import { Label } from "@/ahuora-design-system/ui/label";
import { cn } from "@/lib/utils";
import { EconomicsWarningNotice } from "../../shared/ui/EconomicsWarningNotice";
import type { SaveState } from "../model/capitalLineTypes";
export function SectionHeading({
title,
count,
help,
}: {
title: string;
count?: number;
help?: string;
}) {
return (
<div className="flex flex-wrap items-center justify-between gap-2">
<div className="flex items-center gap-2">
<h4 className="text-sm font-semibold">{title}</h4>
{help && <HelpBadge help={help} />}
</div>
{count != null && (
<Badge variant="secondary" size="xs" borderRadius="round">
{count}
</Badge>
)}
</div>
);
}
export function EmptyState({ text }: { text: string }) {
return (
<div className="rounded-md border border-dashed p-3 text-sm text-muted-foreground">
{text}
</div>
);
}
export function FieldLabel({
htmlFor,
label,
help,
}: {
htmlFor: string;
label: string;
help: string;
}) {
return (
<div className="flex min-h-6 items-center gap-2">
<Label htmlFor={htmlFor}>{label}</Label>
<HelpBadge help={help} />
</div>
);
}
function HelpBadge({ help }: { help: string }) {
return (
<span
className="inline-flex size-4 items-center justify-center rounded-full border text-[10px] text-muted-foreground"
aria-label={help}
title={help}
>
?
</span>
);
}
export function FieldError({ id, message }: { id: string; message?: string }) {
Iif (!message) return null;
return (
<div
id={id}
className="text-xs text-orange-700 dark:text-orange-300"
role="status"
>
{message}
</div>
);
}
export function WarningList({
label = "Warnings",
warnings,
className,
}: {
label?: string;
warnings: string[];
className?: string;
}) {
if (warnings.length === 0) {
return null;
}
return (
<div className={cn("space-y-1", className)} aria-label={label}>
{warnings.map((warning) => (
<EconomicsWarningNotice key={warning} aria-label={warning}>
<span>{warning}</span>
</EconomicsWarningNotice>
))}
</div>
);
}
export function FormState({ state }: { state: SaveState }) {
Iif (state.kind !== "error") return null;
return (
<div
className="mb-3 mt-2 rounded-md border border-rose-500/25 bg-rose-500/10 px-2 py-1.5 text-sm leading-snug text-foreground"
role="alert"
>
<div className="flex items-center gap-1.5">
<AlertCircle
className="size-3.5 shrink-0 text-rose-600 dark:text-rose-300"
aria-hidden="true"
/>
<span className="min-w-0">{state.message}</span>
</div>
</div>
);
}
|