59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
import { ChevronDown, ChevronRight } from "lucide-react";
|
|
import { ConfigSectionDefinition } from "./ConfigPanelTypes";
|
|
|
|
interface ConfigSectionProps {
|
|
section: ConfigSectionDefinition;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export function ConfigSection({ section, children }: ConfigSectionProps) {
|
|
const [isOpen, setIsOpen] = useState(section.defaultOpen ?? true);
|
|
|
|
if (section.collapsible) {
|
|
return (
|
|
<div className="border-b border-border/40 py-2.5">
|
|
<button
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
className="flex w-full items-center justify-between py-0.5 text-left"
|
|
>
|
|
<span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
|
|
{section.title}
|
|
</span>
|
|
<div className="flex items-center gap-1.5">
|
|
{section.description && (
|
|
<span className="text-muted-foreground/60 text-[9px]">
|
|
{section.description}
|
|
</span>
|
|
)}
|
|
{isOpen ? (
|
|
<ChevronDown className="h-3 w-3 shrink-0 text-muted-foreground/50" />
|
|
) : (
|
|
<ChevronRight className="h-3 w-3 shrink-0 text-muted-foreground/50" />
|
|
)}
|
|
</div>
|
|
</button>
|
|
{isOpen && <div className="mt-1.5 space-y-1">{children}</div>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="border-b border-border/40 py-2.5">
|
|
<div className="mb-1.5 flex items-center justify-between">
|
|
<h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
|
|
{section.title}
|
|
</h4>
|
|
{section.description && (
|
|
<span className="text-muted-foreground/60 text-[9px]">
|
|
{section.description}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="space-y-1">{children}</div>
|
|
</div>
|
|
);
|
|
}
|