Function SectionHeader

legacy/components/properties/section.tsx:85–158

({
	children,
	trailing,
	leading,
	actions,
	onClick,
	className,
}: SectionHeaderProps)

}

export function SectionHeader({
	children,
	trailing,
	leading,
	actions,
	onClick,
	className,
}: SectionHeaderProps) {
	const ctx = useSectionContext();
	const isCollapsible = ctx?.collapsible ?? false;
	const isOpen = ctx?.isOpen ?? true;
	const isInteractive = isCollapsible || !!onClick;
	const handleClick = isCollapsible ? ctx?.toggle : onClick;

	const chevronIcon = isCollapsible ? (
		<HugeiconsIcon
			icon={ArrowDownIcon}
			className={cn(
				"size-4 shrink-0 transition-transform duration-200 ease-out",
				isOpen ? "rotate-0 text-foreground" : "-rotate-90 text-muted-foreground",
			)}
		/>
	) : null;

	const headerContent = (
		<>
			{leading}
			<div className="min-w-0 flex-1">{children}</div>
			{(trailing || chevronIcon) && (
				<div className="flex items-center">
					{trailing}
					{chevronIcon && (
						<Button
							variant="ghost"
							size="icon"
							aria-label={isOpen ? "Collapse section" : "Expand section"}
							onClick={(event) => {
								event.stopPropagation();
								handleClick?.();
							}}
						>
							{chevronIcon}
						</Button>
					)}
				</div>
			)}
			{actions}
		</>
	);

	if (!isInteractive) {
		return (
			<div className={cn("flex h-11 w-full items-center gap-2 px-3.5", className)}>
				{headerContent}
			</div>
		);
	}