40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import type { LucideIcon } from "lucide-react";
|
||
import type { ReactNode } from "react";
|
||
|
||
/** 后台统一页头：36px 图标槽 + 标题 + 说明 + 可选右侧 CTA */
|
||
export default function AdminPageHeader({
|
||
icon: Icon,
|
||
title,
|
||
description,
|
||
actions,
|
||
}: {
|
||
icon: LucideIcon;
|
||
title: string;
|
||
description?: ReactNode;
|
||
actions?: ReactNode;
|
||
}) {
|
||
return (
|
||
<div className="mb-5 flex items-start justify-between gap-3 flex-wrap">
|
||
<div className="min-w-0">
|
||
<h1
|
||
className="text-[22px] sm:text-[26px] font-extrabold tracking-tight flex items-center gap-2.5"
|
||
style={{ color: "var(--ink)" }}
|
||
>
|
||
<span
|
||
className="w-9 h-9 rounded-xl flex items-center justify-center shrink-0"
|
||
style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
|
||
aria-hidden
|
||
>
|
||
<Icon size={18} />
|
||
</span>
|
||
{title}
|
||
</h1>
|
||
{description != null && description !== "" && (
|
||
<p className="meta mt-1.5 text-[12.5px] leading-relaxed">{description}</p>
|
||
)}
|
||
</div>
|
||
{actions ? <div className="flex items-center gap-2 shrink-0 flex-wrap">{actions}</div> : null}
|
||
</div>
|
||
);
|
||
}
|