Function SectionContent

apps/web/src/components/section.tsx:230–257

({
	children,
	className,
}: {
	children: React.ReactNode;
	className?: string;
})

}

export function SectionContent({
	children,
	className,
}: {
	children: React.ReactNode;
	className?: string;
}) {
	const ctx = useSectionContext();
	const isCollapsible = ctx?.collapsible ?? false;
	const isOpen = ctx?.isOpen ?? true;

	const content = <div className={cn("p-4 pt-0", className)}>{children}</div>;

	if (isCollapsible) {
		return (
			<div
				className={cn(
					"grid transition-[grid-template-rows] duration-100 ease-out",
					isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]",
				)}
			>
				<div className="overflow-hidden">{content}</div>
			</div>
		);
	}

	return content;
}