refactor(ui): extract reusable component package

packages/ui/src/components/ModuleCard.tsx

@@ -0,0 +1,32 @@
+import { useId } from "react";
+import type { UiModuleBlock } from "../types";
+import { IconGlyph } from "./IconGlyph";
+
+export interface ModuleCardProps {
+  module: UiModuleBlock;
+}
+
+export function ModuleCard({ module }: ModuleCardProps) {
+  const generatedId = useId();
+  const titleId = `${generatedId}-title`;
+  const ariaLabel = module.title ? undefined : module.label || module.id;
+
+  return (
+    <aside
+      className="module-card"
+      data-severity={module.severity || "neutral"}
+      data-model-id={module.id}
+      aria-labelledby={module.title ? titleId : undefined}
+      aria-label={ariaLabel}
+    >
+      <div>
+        {module.title ? <h2 id={titleId}>{module.title}</h2> : null}
+        {module.value ? <strong>{module.value}</strong> : null}
+        {module.detail || module.label ? (
+          <p>{module.detail || module.label}</p>
+        ) : null}
+      </div>
+      {module.icon ? <IconGlyph name={module.icon} size="lg" /> : null}
+    </aside>
+  );
+}