40 lines
949 B
TypeScript
40 lines
949 B
TypeScript
|
import type { ReactNode } from "react";
|
||
|
|
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
|
||
|
|
export type PageHeaderProps = {
|
||
|
|
title: string;
|
||
|
|
description?: ReactNode;
|
||
|
|
/** 右侧主操作(如「创建助手」按钮) */
|
||
|
|
action?: ReactNode;
|
||
|
|
className?: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
/** 列表/资源页统一页头:标题 + 说明 + 右侧操作,移动端纵向堆叠 */
|
||
|
|
export function PageHeader({
|
||
|
|
title,
|
||
|
|
description,
|
||
|
|
action,
|
||
|
|
className,
|
||
|
|
}: PageHeaderProps) {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={cn(
|
||
|
|
"flex flex-col items-start justify-between gap-5 sm:flex-row sm:gap-6",
|
||
|
|
className,
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<div>
|
||
|
|
<h1 className="font-display display-lg text-ink">{title}</h1>
|
||
|
|
{description && (
|
||
|
|
<p className="mt-3 max-w-2xl text-[15px] leading-7 text-muted-foreground">
|
||
|
|
{description}
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{action && <div className="w-full shrink-0 sm:w-auto">{action}</div>}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|