File name
Commit message
Commit date
File name
Commit message
Commit date
import Image from "next/image";
import type { ReactNode } from "react";
interface HeaderProps {
title?: string;
leading?: ReactNode;
/** 우측 슬롯 */
children?: ReactNode;
/** 배치(레이아웃) 조정용 클래스 패스스루만 허용 — 디자인 값(색상·타이포·간격 등) 주입 금지. */
className?: string;
}
/** 상단 헤더 셸 — 로고 + 타이틀 + 우측 슬롯. */
export function Header({ title, leading, children, className }: HeaderProps) {
return (
<header
className={`flex items-center justify-between gap-4 border-b border-border bg-surface px-6 py-4 ${className ?? ""}`}
>
<div className="flex items-center gap-3">
{leading}
<Image
src="/images/logo-foxpay.svg"
alt="FoxPay"
width={170}
height={62}
className="h-8 w-auto"
priority
/>
{title && <span className="text-title-md text-foreground">{title}</span>}
</div>
{children && <div className="flex items-center gap-3">{children}</div>}
</header>
);
}