refactor(ui): organize component source tree

packages/ui/src/components/frames/FooterCell.tsx

@@ -0,0 +1,42 @@
+import type { UiStatusItem } from "../../types";
+
+export interface FooterCellProps {
+  item: UiStatusItem;
+}
+
+export function FooterCell({ item }: FooterCellProps) {
+  const target = item.link?.external ? "_blank" : undefined;
+  const rel = item.link?.external ? "noreferrer" : undefined;
+  const content = (
+    <>
+      <span>{item.label}</span>
+      <strong>{item.value}</strong>
+    </>
+  );
+
+  if (item.link) {
+    return (
+      <a
+        className="footer-cell"
+        data-severity={item.severity || "neutral"}
+        data-model-id={item.id}
+        href={item.link.href}
+        target={target}
+        rel={rel}
+        aria-label={item.link.label}
+      >
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <div
+      className="footer-cell"
+      data-severity={item.severity || "neutral"}
+      data-model-id={item.id}
+    >
+      {content}
+    </div>
+  );
+}