60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
"use client"
|
|
|
|
import { Button } from "@/app/components/ui/button"
|
|
import type { ReactNode } from "react"
|
|
|
|
interface PageHeaderProps {
|
|
title: string
|
|
description?: string
|
|
primaryAction?: {
|
|
label: string
|
|
icon?: ReactNode
|
|
onClick: () => void
|
|
variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link"
|
|
}
|
|
secondaryActions?: Array<{
|
|
label: string
|
|
icon?: ReactNode
|
|
onClick: () => void
|
|
variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link"
|
|
}>
|
|
}
|
|
|
|
export function PageHeader({ title, description, primaryAction, secondaryActions = [] }: PageHeaderProps) {
|
|
return (
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 pb-6 border-b">
|
|
<div className="space-y-1">
|
|
<h1 className="text-2xl font-bold tracking-tight">{title}</h1>
|
|
{description && <p className="text-muted-foreground">{description}</p>}
|
|
</div>
|
|
|
|
{(primaryAction || secondaryActions.length > 0) && (
|
|
<div className="flex items-center gap-2">
|
|
{secondaryActions.map((action, index) => (
|
|
<Button
|
|
key={index}
|
|
variant={action.variant || "outline"}
|
|
onClick={action.onClick}
|
|
className="flex items-center"
|
|
>
|
|
{action.icon}
|
|
{action.label}
|
|
</Button>
|
|
))}
|
|
|
|
{primaryAction && (
|
|
<Button
|
|
variant={primaryAction.variant || "default"}
|
|
onClick={primaryAction.onClick}
|
|
className="flex items-center"
|
|
>
|
|
{primaryAction.icon}
|
|
{primaryAction.label}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|