feat(drill): ProviderDrawer with Overview tab + DrillDrawerHeader shell

2026-06-21 14:40:08 -06:00
parent 5b3b8619e6
commit 0678e25de7
7 changed files with 241 additions and 1 deletions
@@ -0,0 +1,37 @@
+import { X } from "lucide-react";
+
+interface Props {
+  eyebrow: string;
+  title: string;
+  onClose: () => void;
+}
+
+/**
+ * Shared side-panel header used by every SP21 drill-down drawer
+ * (provider, …future ones). Renders an uppercase eyebrow above a
+ * larger title, with a close button on the right.
+ *
+ * Visual style mirrors the eyebrow + title pattern used elsewhere in
+ * the app (see ``.eyebrow`` in ``src/index.css`` and the
+ * ``DrillDrawerHeader`` usage in ``ClaimDrawerHeader``).
+ */
+export function DrillDrawerHeader({ eyebrow, title, onClose }: Props) {
+  return (
+    <div className="flex items-center justify-between border-b border-border/30 px-6 py-4">
+      <div>
+        <div className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
+          {eyebrow}
+        </div>
+        <h2 className="text-[18px] font-semibold tracking-tight mt-0.5">{title}</h2>
+      </div>
+      <button
+        type="button"
+        onClick={onClose}
+        aria-label="Close drawer"
+        className="rounded-md p-1 text-muted-foreground hover:bg-muted/60 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        <X className="h-4 w-4" aria-hidden />
+      </button>
+    </div>
+  );
+}