38 lines
1020 B
TypeScript
38 lines
1020 B
TypeScript
import type { ReactNode } from "react";
|
||
|
||
import { cn } from "@/lib/utils";
|
||
|
||
type ConfigSectionProps = {
|
||
title: string;
|
||
description?: string;
|
||
actions?: ReactNode;
|
||
children: ReactNode;
|
||
className?: string;
|
||
/** 页内锚点，供旧链接跳转（如 #records） */
|
||
id?: string;
|
||
};
|
||
|
||
export function ConfigSection({
|
||
title,
|
||
description,
|
||
actions,
|
||
children,
|
||
className,
|
||
id,
|
||
}: ConfigSectionProps) {
|
||
return (
|
||
<section id={id} className={cn("scroll-mt-24 space-y-4", className)}>
|
||
<div className="flex flex-wrap items-start justify-between gap-3 border-b border-border/60 pb-3">
|
||
<div className="min-w-0 space-y-1">
|
||
<h3 className="text-base font-semibold text-foreground">{title}</h3>
|
||
{description ? (
|
||
<p className="text-sm text-muted-foreground">{description}</p>
|
||
) : null}
|
||
</div>
|
||
{actions ? <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div> : null}
|
||
</div>
|
||
{children}
|
||
</section>
|
||
);
|
||
}
|