Initial commit

src/components/ds/SectionHeader.jsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { ChevronRight } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+/**
+ * SectionHeader — the label row above a section or inside a card. Three levels
+ * so the hierarchy below a PageHeader stays predictable:
+ *
+ * - `overline` — a small all-caps group label ("INTERVIEW COMPLETION")
+ * - `card`     — a card's own title row
+ * - `section`  — a page-level section title
+ */
+export function SectionHeader({
+  title,
+  subtitle,
+  icon: Icon,
+  level = 'card',
+  actions,
+  /** Renders a "View all ›" affordance on the right. */
+  onViewAll,
+  viewAllLabel = 'View all',
+  className,
+}) {
+  if (level === 'overline') {
+    return (
+      <div className={cn('flex items-center justify-between gap-3 mb-3', className)}>
+        <h2 className="text-overline uppercase text-ink-4 font-heading">{title}</h2>
+        {actions}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex items-start justify-between gap-3',
+        level === 'section' ? 'mb-4' : 'mb-5',
+        className
+      )}
+    >
+      <div className="flex items-start gap-2.5 min-w-0">
+        {Icon && (
+          <span className="grid place-items-center w-8 h-8 rounded-lg bg-krow-blue-tint text-krow-blue shrink-0">
+            <Icon className="w-4 h-4" aria-hidden="true" />
+          </span>
+        )}
+        <div className="min-w-0">
+          <h3
+            className={cn(
+              'font-heading text-ink-1 truncate',
+              level === 'section' ? 'text-title-lg' : 'text-title'
+            )}
+          >
+            {title}
+          </h3>
+          {subtitle && <p className="text-caption text-ink-3 mt-0.5">{subtitle}</p>}
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2 shrink-0">
+        {actions}
+        {onViewAll && (
+          <button
+            type="button"
+            onClick={onViewAll}
+            className="inline-flex items-center gap-1 text-caption font-medium text-krow-blue hover:underline focus-ring rounded-sm"
+          >
+            {viewAllLabel}
+            <ChevronRight className="w-3 h-3" aria-hidden="true" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}