Function SectionHeader

apps/web/src/components/section.tsx:92–160

({
	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 = (
		<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",
			)}
		/>
	);

	const trailingArea =
		trailing || isCollapsible ? (
			<div className="flex items-center">
				{trailing}
				{isCollapsible && (
					<Button
						variant="ghost"
						size="icon"
						aria-label={isOpen ? "Collapse section" : "Expand section"}
						onClick={handleClick}
					>
						{chevronIcon}
					</Button>
				)}
			</div>
		) : null;

	const innerContent = isInteractive ? (
		<button
			type="button"
			className="min-w-0 flex-1 flex items-center gap-2 h-full cursor-pointer text-left"
			onClick={handleClick}
		>
			{leading}
			<div className="min-w-0 flex-1 flex items-center">{children}</div>
		</button>
	) : (
		<>
			{leading}
			<div className="min-w-0 flex-1 flex items-center">{children}</div>
		</>
	);