Function CodeGroupHeader

apps/baseai.dev/src/components/Code.tsx:184–230

({
	title,
	children,
	selectedIndex
}: {
	title: string;
	children: React.ReactNode;
	selectedIndex: number;
})

}

function CodeGroupHeader({
	title,
	children,
	selectedIndex
}: {
	title: string;
	children: React.ReactNode;
	selectedIndex: number;
}) {
	// let hasTabs = Children.count(children) > 1;

	// if (!title && !hasTabs) {
	// 	return null;
	// }

	if (!title) {
		return null;
	}

	return (
		<div className="flex min-h-[calc(theme(spacing.12)+1px)] flex-wrap items-start gap-x-4 bg-background px-4">
			{title && (
				<h3 className="mr-auto pt-3 text-xs font-semibold dark:text-white">
					{title}
				</h3>
			)}
			{/* {hasTabs && ( */}
				<TabList className="-mb-px flex gap-4 text-xs font-medium">
					{Children.map(children, (child, childIndex) => (
						<Tab
							className={clsx(
								'border-b py-3 transition ui-not-focus-visible:outline-none',
								childIndex === selectedIndex
									? 'border-[#2D2B55] text-[#2D2B55] dark:border-[#fad000] dark:text-[#fad000]'
									: 'border-transparent text-zinc-400 hover:text-zinc-500'
							)}
						>
							{getPanelTitle(
								isValidElement(child) ? (child.props as { title?: string; language?: string }) : {}
							)}
						</Tab>
					))}
				</TabList>
			{/* )} */}
		</div>
	);
}

function CodeGroupPanels({
	children,