feat: standardize shared UI primitives across frontend

frontend/src/components/common/PageHeader.tsx

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+
+interface PageHeaderProps {
+  title: string
+  description?: string
+  icon?: ReactNode
+  action?: ReactNode
+  className?: string
+  titleClassName?: string
+  descriptionClassName?: string
+}
+
+export function PageHeader({
+  title,
+  description,
+  icon,
+  action,
+  className,
+  titleClassName,
+  descriptionClassName,
+}: PageHeaderProps) {
+  return (
+    <div className={cn('flex items-start justify-between gap-4', className)}>
+      <div className="flex items-start gap-3">
+        {icon && <div className="shrink-0">{icon}</div>}
+        <div>
+          <h1 className={cn('text-2xl font-bold font-heading text-foreground', titleClassName)}>
+            {title}
+          </h1>
+          {description && (
+            <p className={cn('mt-1 text-sm text-muted-foreground', descriptionClassName)}>
+              {description}
+            </p>
+          )}
+        </div>
+      </div>
+      {action && <div className="shrink-0">{action}</div>}
+    </div>
+  )
+}
+
+export default PageHeader