Merge branch 'ui-refactor' into ui-refactor-ui

client/ui/frontend/src/components/StatusPanel.tsx

@@ -0,0 +1,48 @@
+import type { ReactNode } from "react";
+import { Check, Loader2, XCircle } from "lucide-react";
+import { cn } from "@/lib/cn";
+
+type Variant = "loading" | "success" | "error";
+
+type Props = {
+    variant: Variant;
+    title: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+    actions?: ReactNode;
+};
+
+const VARIANTS: Record<Variant, { icon: ReactNode; className: string }> = {
+    loading: {
+        icon: <Loader2 className={"animate-spin text-nb-gray-950"} size={16} />,
+        className: "bg-nb-gray-100",
+    },
+    success: {
+        icon: <Check className={"text-white"} size={18} />,
+        className: "bg-green-500",
+    },
+    error: {
+        icon: <XCircle className={"text-white"} size={18} />,
+        className: "bg-red-500",
+    },
+};
+
+export function StatusPanel({ variant, title, description, children, actions }: Props) {
+    const { icon, className } = VARIANTS[variant];
+    return (
+        <div className={"absolute inset-0 flex flex-col items-center justify-center gap-5 px-8"}>
+            <div className={cn("h-9 w-9 rounded-md flex items-center justify-center", className)}>
+                {icon}
+            </div>
+
+            <div className={"flex flex-col items-center gap-0.5 max-w-md text-center"}>
+                <p className={"text-base font-medium text-nb-gray-50"}>{title}</p>
+                {description && <p className={"text-sm text-nb-gray-300"}>{description}</p>}
+            </div>
+
+            {children && <div className={"w-full max-w-md flex flex-col gap-3"}>{children}</div>}
+
+            {actions && <div className={"flex items-center gap-2"}>{actions}</div>}
+        </div>
+    );
+}