32 lines
1.1 KiB
TypeScript
32 lines
1.1 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import { Loader2 } from "lucide-react";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import type { RouteLoadingState } from "@/lib/routeLoadingView";
|
|
|
|
interface RouteLoadingCardProps {
|
|
state: RouteLoadingState;
|
|
children?: ReactNode;
|
|
}
|
|
|
|
export const RouteLoadingCard = ({ state, children }: RouteLoadingCardProps) => (
|
|
<Card className="signal-rail border-slate-700 bg-slate-900/60">
|
|
<CardContent className="space-y-5 p-5">
|
|
<div className="flex items-start gap-3">
|
|
<Loader2 className="mt-0.5 h-4 w-4 shrink-0 animate-spin text-blue-300" />
|
|
<div className="min-w-0">
|
|
<h3 className="text-sm font-bold text-slate-100">{state.title}</h3>
|
|
<p className="mt-1 text-sm leading-6 text-slate-400">{state.message}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
{state.facts.map((fact) => (
|
|
<span key={fact} className="metric-capsule text-slate-400">
|
|
{fact}
|
|
</span>
|
|
))}
|
|
</div>
|
|
{children}
|
|
</CardContent>
|
|
</Card>
|
|
);
|