47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
import type { ReactNode } from "react";
|
||
|
||
/** 控制台模块：标题 / 说明 / 右上 extra；列表页一张表一块 */
|
||
export default function AdminSection({
|
||
title,
|
||
description,
|
||
extra,
|
||
children,
|
||
className = "",
|
||
bodyClassName = "",
|
||
flush = false,
|
||
}: {
|
||
title?: ReactNode;
|
||
description?: ReactNode;
|
||
extra?: ReactNode;
|
||
children: ReactNode;
|
||
className?: string;
|
||
bodyClassName?: string;
|
||
/** 无内边距，适合表格/列表铺满 */
|
||
flush?: boolean;
|
||
}) {
|
||
const hasHead = title != null || description != null || extra != null;
|
||
return (
|
||
<section className={`panel overflow-hidden ${className}`.trim()}>
|
||
{hasHead && (
|
||
<div
|
||
className="px-4 sm:px-5 py-3.5 flex items-start justify-between gap-3 flex-wrap"
|
||
style={{ borderBottom: "1px solid var(--line)" }}
|
||
>
|
||
<div className="min-w-0">
|
||
{title != null && (
|
||
<h2 className="font-medium text-[15px]" style={{ color: "var(--ink)" }}>
|
||
{title}
|
||
</h2>
|
||
)}
|
||
{description != null && description !== "" && (
|
||
<p className="meta text-[12.5px] mt-0.5 leading-relaxed">{description}</p>
|
||
)}
|
||
</div>
|
||
{extra != null && <div className="shrink-0">{extra}</div>}
|
||
</div>
|
||
)}
|
||
<div className={`${flush ? "" : "p-4 sm:p-5"} ${bodyClassName}`.trim()}>{children}</div>
|
||
</section>
|
||
);
|
||
}
|