@exxatdesignux/ui 0.0.9 → 0.2.6

package/template/components/question-bank-page-header.tsx

@@ -2,7 +2,11 @@
 
 import * as React from "react"
 import { Button } from "@/components/ui/button"
-import { PageHeader } from "@/components/page-header"
+import {
+  PageHeader,
+  type PageHeaderCollaborator,
+  type PageHeaderVariant,
+} from "@/components/page-header"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -11,31 +15,56 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { Tip } from "@/components/ui/tip"
+import { QUESTION_BANK_HEADER_COLLABORATORS } from "@/lib/mock/question-bank-header-collaborators"
 
 export interface QuestionBankPageHeaderProps {
+  /** Defaults to “Question bank” when omitted (template hub). */
+  title?: string
   questionCount: number
   onNewQuestion: () => void
   onExport: () => void
   showMetrics: boolean
   onToggleMetrics: () => void
   showTitleBlock?: boolean
+  /** `collaboration` adds access line + collaborator stack + invite before CTAs. */
+  variant?: PageHeaderVariant
+  /** Optional role / access row when `variant="collaboration"` (badge + copy). */
+  accessInfo?: React.ReactNode
+  collaborators?: PageHeaderCollaborator[]
+  collaboratorDisplayLimit?: number
+  onAddCollaborator?: () => void
+  addCollaboratorLabel?: string
 }
 
 export function QuestionBankPageHeader({
+  title = "Question bank",
   questionCount,
   onNewQuestion,
   onExport,
   showMetrics,
   onToggleMetrics,
   showTitleBlock = true,
+  variant = "default",
+  accessInfo,
+  collaborators = QUESTION_BANK_HEADER_COLLABORATORS,
+  collaboratorDisplayLimit = 4,
+  onAddCollaborator = () => {},
+  addCollaboratorLabel = "Invite people",
 }: QuestionBankPageHeaderProps) {
   const [moreOpen, setMoreOpen] = React.useState(false)
   const countLine = `${questionCount} ${questionCount === 1 ? "question" : "questions"} · Last updated now`
+  const resolvedAccess = variant === "collaboration" ? accessInfo : undefined
 
   return (
     <PageHeader
-      title="Question bank"
+      title={title}
       subtitle={countLine}
+      variant={variant}
+      accessInfo={resolvedAccess}
+      collaborators={variant === "collaboration" ? collaborators : undefined}
+      collaboratorDisplayLimit={collaboratorDisplayLimit}
+      onAddCollaborator={variant === "collaboration" ? onAddCollaborator : undefined}
+      addCollaboratorLabel={addCollaboratorLabel}
       showTitleBlock={showTitleBlock}
       actions={(
         <div className="flex items-center gap-2" role="group" aria-label="Question bank actions">

package/template/lib/mock/question-bank-header-collaborators.ts

@@ -0,0 +1,14 @@
+/**
+ * Demo collaborators for Question bank collaboration header (stacked faces).
+ */
+
+import { stockPortraitUrl } from "@/lib/stock-portrait"
+import type { PageHeaderCollaborator } from "@/components/page-header"
+
+export const QUESTION_BANK_HEADER_COLLABORATORS: PageHeaderCollaborator[] = [
+  { id: "1", name: "Alex Morgan", imageUrl: stockPortraitUrl("qb-collab-alex"), initials: "AM" },
+  { id: "2", name: "Jordan Lee", imageUrl: stockPortraitUrl("qb-collab-jordan"), initials: "JL" },
+  { id: "3", name: "Sam Rivera", imageUrl: stockPortraitUrl("qb-collab-sam"), initials: "SR" },
+  { id: "4", name: "Taylor Kim", imageUrl: stockPortraitUrl("qb-collab-taylor"), initials: "TK" },
+  { id: "5", name: "Riley Patel", imageUrl: stockPortraitUrl("qb-collab-riley"), initials: "RP" },
+]