From f86a5ba9a1b85d7c1d068a0ede1954f3a2169485 Mon Sep 17 00:00:00 2001
From: Markus Thielker <mail.markus.thielker@gmail.com>
Date: Fri, 27 Dec 2024 10:28:22 +0100
Subject: [PATCH] NORY-42: add status card component

---
 dashboard/src/components/status-card.tsx | 62 ++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 dashboard/src/components/status-card.tsx

diff --git a/dashboard/src/components/status-card.tsx b/dashboard/src/components/status-card.tsx
new file mode 100644
index 0000000..d6d4038
--- /dev/null
+++ b/dashboard/src/components/status-card.tsx
@@ -0,0 +1,62 @@
+import { Card, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+
+export type MetadataApiReady = {
+    status?: 'ok',
+    errors?: string[]
+}
+
+interface StatusCardProps {
+    title: string;
+    version?: string;
+    name: string;
+    status: MetadataApiReady;
+    className?: string;
+}
+
+export function StatusCard({ title, version, name, status, className }: StatusCardProps) {
+
+    return (
+        <Card className={className}>
+            <CardHeader>
+                <CardTitle>
+                    {title}
+                </CardTitle>
+                <CardDescription>
+                    {
+                        version ?
+                            <span>Version {version}</span>
+                            :
+                            <span>OFFLINE</span>
+                    }
+                </CardDescription>
+            </CardHeader>
+            <CardFooter className="space-x-1">
+                {
+                    status.status && (
+                        <Badge variant="success">
+                            {name} {status.status.toUpperCase()}
+                        </Badge>
+                    )
+                }
+                {
+                    status.errors && (
+                        <Tooltip>
+                            <TooltipTrigger>
+                                <Badge variant="destructive">
+                                    {name} Error
+                                </Badge>
+                            </TooltipTrigger>
+                            <TooltipContent>
+                                {
+                                    status.errors.map((error) => <span>{error}</span>)
+                                }
+                            </TooltipContent>
+                        </Tooltip>
+                    )
+                }
+            </CardFooter>
+        </Card>
+    );
+}