sendou.ink/app/components/Tabs.tsx

import clsx from "clsx";
import type * as React from "react";

// shares styles with SubNav.tsx

export function Tabs({
	children,
	className,
	compact = false,
}: {
	children: React.ReactNode;
	className?: string;
	compact?: boolean;
}) {
	return (
		<div className={clsx("sub-nav__container", className, { compact })}>
			{children}
		</div>
	);
}

export function Tab({
	children,
	className,
	active,
	onClick,
	testId,
}: {
	children: React.ReactNode;
	className?: string;
	active: boolean;
	onClick: () => void;
	testId?: string;
}) {
	// TODO: improve semantic html here, maybe could use tab component from Headless UI?
	return (
		<div
			className={clsx("sub-nav__link__container", { active })}
			onClick={onClick}
			tabIndex={0}
			role="button"
			aria-pressed="false"
			data-testid={testId}
		>
			<div className={clsx("sub-nav__link", className)}>{children}</div>
			<div className="sub-nav__border-guy" />
		</div>
	);
}