Function Section

apps/web/src/components/section.tsx:33–81

({
	children,
	collapsible = false,
	defaultOpen = true,
	sectionKey,
	className,
	showTopBorder = false,
	showBottomBorder = true,
}: SectionProps)

}

export function Section({
	children,
	collapsible = false,
	defaultOpen = true,
	sectionKey,
	className,
	showTopBorder = false,
	showBottomBorder = true,
}: SectionProps) {
	const cached = sectionKey ? sectionExpandedCache.get(sectionKey) : undefined;
	const [isOpen, setIsOpen] = useState(cached ?? defaultOpen);

	useEffect(() => {
		if (!sectionKey) return;
		if (
			process.env.NODE_ENV !== "production" &&
			mountedSectionKeys.has(sectionKey)
		) {
			console.error(
				`[Section] duplicate sectionKey mounted simultaneously: "${sectionKey}"`,
			);
		}
		mountedSectionKeys.add(sectionKey);
		return () => {
			mountedSectionKeys.delete(sectionKey);
		};
	}, [sectionKey]);

	const toggle = () => {
		const next = !isOpen;
		setIsOpen(next);
		if (sectionKey) sectionExpandedCache.set(sectionKey, next);
	};

	return (
		<SectionCtx.Provider value={{ isOpen, toggle, collapsible }}>
			<div
				className={cn(
					"flex flex-col",
					showTopBorder && "border-t first:border-t-0",
					showBottomBorder && "border-b",
					className,
				)}
			>
				{children}
			</div>
		</SectionCtx.Provider>
	);
}

interface SectionHeaderProps {
	children?: React.ReactNode;