File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
08-14
08-14
08-18
08-14
08-18
08-18
08-18
File name
Commit message
Commit date
"use client";
import type { ReactNode } from "react";
import { cx } from "../../utils";
import { FoxBreadcrumb, type FoxBreadcrumbItem } from "../fox-breadcrumb";
export interface FoxPageHeaderProps {
/** 화면 제목. 페이지에 하나뿐인 이름이라 `<h1>`으로 나간다. */
title: ReactNode;
/** 제목 위에 붙는 현재 위치. 넘기지 않으면 영역을 그리지 않는다. */
breadcrumb?: FoxBreadcrumbItem[];
/**
* 제목 오른쪽 자리. 시안에는 들어간 것이 없지만 배치가 자리를 비워 두고 있어
* (제목이 남는 폭을 먹고 24px 간격이 있다) 화면이 버튼 같은 것을 얹을 수 있게 연다.
*/
actions?: ReactNode;
/** 참이면 렌더하지 않는다(DOM에 남지 않는다). */
hidden?: boolean;
/** 배치 조정용. */
className?: string;
}
/**
* @fox 화면 머리말. 현재 위치와 제목을 얹고 본문과의 간격까지 갖는다.
*
* 현재 위치는 `FoxBreadcrumb`를 그대로 쓴다 — 시안에서도 breadcrumb 인스턴스다.
*
* ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
* (또는 개별 파티셜)로 한 번 불러와야 한다.
*/
export function FoxPageHeader({
title,
breadcrumb,
actions,
hidden = false,
className,
}: FoxPageHeaderProps) {
if (hidden) {
return null;
}
return (
<div className={cx("fox-page-header", className)}>
<div className="fox-page-header__main">
{breadcrumb && breadcrumb.length > 0 && <FoxBreadcrumb items={breadcrumb} />}
<h1 className="fox-page-header__title">{title}</h1>
</div>
{actions && <div className="fox-page-header__actions">{actions}</div>}
</div>
);
}