59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { ArrowLeft, HelpCircle } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface PageHeaderProps {
|
|
title: string;
|
|
subtitle?: string;
|
|
showBackButton?: boolean;
|
|
onBack?: () => void;
|
|
showHelpButton?: boolean;
|
|
onHelp?: () => void;
|
|
children?: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export function PageHeader({
|
|
title,
|
|
subtitle,
|
|
showBackButton = false,
|
|
onBack,
|
|
showHelpButton = false,
|
|
onHelp,
|
|
children,
|
|
className,
|
|
}: PageHeaderProps) {
|
|
return (
|
|
<div className={cn("flex items-center justify-between border-b border-slate-200 pb-6", className)}>
|
|
<div className="flex items-center space-x-4">
|
|
{showBackButton && (
|
|
<Button variant="ghost" size="sm" onClick={onBack} className="h-8 w-8 p-0">
|
|
<ArrowLeft className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-slate-900">{title}</h1>
|
|
{subtitle && <p className="mt-1 text-sm text-slate-600">{subtitle}</p>}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
{children}
|
|
{showHelpButton && (
|
|
<Button variant="outline" size="sm" onClick={onHelp} className="h-8 w-8 p-0">
|
|
<HelpCircle className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 페이지 헤더 액션 버튼 컴포넌트
|
|
export function PageHeaderActions({ children, className }: { children: React.ReactNode; className?: string }) {
|
|
return <div className={cn("flex items-center space-x-2", className)}>{children}</div>;
|
|
}
|