feat(ui): port dashboard components to react

src/lib/ui/components/ServiceRow.tsx

@@ -0,0 +1,50 @@
+import type { UiServiceRow } from "../types";
+import { IconGlyph } from "./IconGlyph";
+import { StatusBadge } from "./StatusBadge";
+
+export interface ServiceRowProps {
+  service: UiServiceRow;
+}
+
+export function ServiceRow({ service }: ServiceRowProps) {
+  const target = service.link?.external ? "_blank" : undefined;
+  const rel = service.link?.external ? "noreferrer" : undefined;
+  const content = (
+    <>
+      <IconGlyph name={service.icon} />
+      <div className="service-row__main">
+        <h3>{service.label}</h3>
+        <p>{service.description}</p>
+      </div>
+      {service.detail ? (
+        <StatusBadge label={service.detail} severity={service.severity} />
+      ) : null}
+    </>
+  );
+
+  if (service.link) {
+    return (
+      <a
+        className="service-row"
+        data-severity={service.severity}
+        data-model-id={service.id}
+        href={service.link.href}
+        target={target}
+        rel={rel}
+        aria-label={service.link.label}
+      >
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <article
+      className="service-row"
+      data-severity={service.severity}
+      data-model-id={service.id}
+    >
+      {content}
+    </article>
+  );
+}