44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { ArrowLeft } from 'lucide-react'
|
|
import { Button } from '@/components/ui/button'
|
|
|
|
interface PageHeaderProps {
|
|
title: string
|
|
subtitle?: string
|
|
backHref?: string
|
|
backLabel?: string
|
|
rightContent?: React.ReactNode
|
|
}
|
|
|
|
export function PageHeader({
|
|
title,
|
|
subtitle,
|
|
backHref,
|
|
backLabel = 'Back',
|
|
rightContent,
|
|
}: PageHeaderProps) {
|
|
return (
|
|
<header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
|
<div className="container flex h-16 items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
{backHref && (
|
|
<Button variant="ghost" size="sm" asChild>
|
|
<Link href={backHref}>
|
|
<ArrowLeft className="mr-2 h-4 w-4" />
|
|
{backLabel}
|
|
</Link>
|
|
</Button>
|
|
)}
|
|
<div>
|
|
<h1 className="text-xl font-semibold">{title}</h1>
|
|
{subtitle && <p className="text-sm text-muted-foreground">{subtitle}</p>}
|
|
</div>
|
|
</div>
|
|
{rightContent && <div className="flex items-center gap-2">{rightContent}</div>}
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|