refactor(ui): extract reusable component package

packages/ui/src/components/Panel.tsx

@@ -0,0 +1,19 @@
+import type { PropsWithChildren } from "react";
+
+export interface PanelProps extends PropsWithChildren {
+  title?: string;
+  density?: "compact" | "dense";
+}
+
+export function Panel({ title, density = "dense", children }: PanelProps) {
+  return (
+    <section className="panel" data-density={density}>
+      {title ? (
+        <header className="panel__header">
+          <h2>{title}</h2>
+        </header>
+      ) : null}
+      <div className="panel__body">{children}</div>
+    </section>
+  );
+}