43 lines
1.8 KiB
TypeScript
43 lines
1.8 KiB
TypeScript
import { ClockIcon } from "lucide-react";
|
||
|
||
import { exceptionQueue } from "@/entities/site-content";
|
||
import { severityTone } from "@/shared/lib/ops-tone";
|
||
import { Badge } from "@/shared/ui/badge";
|
||
import { Separator } from "@/shared/ui/separator";
|
||
import { Panel } from "@/shared/ui/panel";
|
||
|
||
export function ExceptionBoard() {
|
||
return (
|
||
<Panel className="p-4">
|
||
<div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||
<div>
|
||
<h2 className="font-display text-2xl font-semibold">Exception queue</h2>
|
||
<p className="mt-1 text-sm text-muted-foreground">Каждое исключение имеет owner, timer и следующее действие.</p>
|
||
</div>
|
||
<Badge variant="outline" className="w-fit rounded-md border-rose-200 bg-rose-50 text-rose-700">
|
||
no fire-and-forget handoff
|
||
</Badge>
|
||
</div>
|
||
<div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
|
||
{exceptionQueue.map((item) => (
|
||
<article key={item.title} className="rounded-md border border-border bg-background p-4">
|
||
<div className="mb-5 flex items-center justify-between gap-3">
|
||
<Badge variant="outline" className={`rounded-md ${severityTone[item.severity]}`}>
|
||
{item.severity}
|
||
</Badge>
|
||
<span className="flex items-center gap-1 text-xs text-muted-foreground">
|
||
<ClockIcon className="size-3.5" />
|
||
{item.time}
|
||
</span>
|
||
</div>
|
||
<h3 className="font-semibold leading-tight">{item.title}</h3>
|
||
<p className="mt-2 text-sm text-muted-foreground">{item.owner}</p>
|
||
<Separator className="my-4" />
|
||
<p className="text-sm leading-6">{item.action}</p>
|
||
</article>
|
||
))}
|
||
</div>
|
||
</Panel>
|
||
);
|
||
}
|