feat: scaffold tickets experience

web/src/components/page-header.tsx

@@ -0,0 +1,42 @@
+import type { ReactNode } from "react"
+
+import { Button } from "@/components/ui/button"
+
+interface PageHeaderProps {
+  title: string
+  description?: string
+  actions?: ReactNode
+  children?: ReactNode
+}
+
+export function PageHeader({ title, description, actions, children }: PageHeaderProps) {
+  return (
+    <div className="flex flex-col gap-6 border-b px-4 pb-6 pt-4 lg:px-6">
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
+          {description ? (
+            <p className="mt-1 text-sm text-muted-foreground">{description}</p>
+          ) : null}
+        </div>
+        {actions ? <div className="flex shrink-0 items-center gap-2">{actions}</div> : null}
+      </div>
+      {children}
+    </div>
+  )
+}
+
+PageHeader.Action = function PageHeaderAction({ children }: { children: ReactNode }) {
+  return <div className="flex items-center gap-2">{children}</div>
+}
+
+PageHeader.PrimaryButton = function PageHeaderPrimaryButton({
+  children,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  return (
+    <Button size="sm" {...props}>
+      {children}
+    </Button>
+  )
+}