Blame · tabs.tsx

4dfd09b	1	"use client";
4dfd09b	2
4dfd09b	3	import { createContext, useContext } from "react";
4dfd09b	4	import Link from "next/link";
4dfd09b	5
4dfd09b	6	interface TabsContextValue {
4dfd09b	7	value: string;
4dfd09b	8	onValueChange?: (value: string) => void;
4dfd09b	9	}
4dfd09b	10
4dfd09b	11	const TabsContext = createContext<TabsContextValue>({ value: "" });
4dfd09b	12
4dfd09b	13	export interface TabsProps {
4dfd09b	14	value: string;
4dfd09b	15	onValueChange?: (value: string) => void;
4dfd09b	16	children: React.ReactNode;
4dfd09b	17	className?: string;
4dfd09b	18	}
4dfd09b	19
4dfd09b	20	export function Tabs({ value, onValueChange, children, className = "" }: TabsProps) {
4dfd09b	21	return (
4dfd09b	22	<TabsContext.Provider value={{ value, onValueChange }}>
4dfd09b	23	<div className={className}>{children}</div>
4dfd09b	24	</TabsContext.Provider>
4dfd09b	25	);
4dfd09b	26	}
4dfd09b	27
4dfd09b	28	export interface TabListProps {
4dfd09b	29	children: React.ReactNode;
4dfd09b	30	className?: string;
4dfd09b	31	}
4dfd09b	32
4dfd09b	33	export function TabList({ children, className = "" }: TabListProps) {
4dfd09b	34	return (
4dfd09b	35	<div
4dfd09b	36	className={`flex gap-0 text-sm mb-6 ${className}`}
4dfd09b	37	style={{ borderBottom: "1px solid var(--border)" }}
4dfd09b	38	role="tablist"
4dfd09b	39	>
4dfd09b	40	{children}
4dfd09b	41	</div>
4dfd09b	42	);
4dfd09b	43	}
4dfd09b	44
4dfd09b	45	export interface TabProps {
4dfd09b	46	value: string;
4dfd09b	47	children: React.ReactNode;
4dfd09b	48	href?: string;
4dfd09b	49	}
4dfd09b	50
4dfd09b	51	export function Tab({ value, children, href }: TabProps) {
4dfd09b	52	const ctx = useContext(TabsContext);
4dfd09b	53	const isActive = ctx.value === value;
4dfd09b	54
4dfd09b	55	const tabStyle: React.CSSProperties = {
4dfd09b	56	color: isActive ? "var(--text-primary)" : "var(--text-muted)",
4dfd09b	57	borderBottom: isActive
4dfd09b	58	? "2px solid var(--accent)"
4dfd09b	59	: "2px solid transparent",
4dfd09b	60	};
4dfd09b	61
4dfd09b	62	if (href) {
4dfd09b	63	return (
4dfd09b	64	<Link
4dfd09b	65	href={href}
4dfd09b	66	className="px-3 py-2 -mb-px transition-colors"
4dfd09b	67	style={tabStyle}
4dfd09b	68	role="tab"
4dfd09b	69	aria-selected={isActive}
4dfd09b	70	>
4dfd09b	71	{children}
4dfd09b	72	</Link>
4dfd09b	73	);
4dfd09b	74	}
4dfd09b	75
4dfd09b	76	return (
4dfd09b	77	<button
4dfd09b	78	onClick={() => ctx.onValueChange?.(value)}
4dfd09b	79	className="px-3 py-2 -mb-px transition-colors"
4dfd09b	80	style={{
4dfd09b	81	...tabStyle,
4dfd09b	82	background: "none",
4dfd09b	83	border: "none",
4dfd09b	84	borderBottom: tabStyle.borderBottom,
4dfd09b	85	cursor: "pointer",
4dfd09b	86	font: "inherit",
4dfd09b	87	fontSize: "inherit",
4dfd09b	88	}}
4dfd09b	89	role="tab"
4dfd09b	90	aria-selected={isActive}
4dfd09b	91	>
4dfd09b	92	{children}
4dfd09b	93	</button>
4dfd09b	94	);
4dfd09b	95	}
4dfd09b	96
4dfd09b	97	export interface TabPanelProps {
4dfd09b	98	value: string;
4dfd09b	99	children: React.ReactNode;
4dfd09b	100	}
4dfd09b	101
4dfd09b	102	export function TabPanel({ value, children }: TabPanelProps) {
4dfd09b	103	const ctx = useContext(TabsContext);
4dfd09b	104	if (ctx.value !== value) return null;
4dfd09b	105	return <div role="tabpanel">{children}</div>;
4dfd09b	106	}