Matt
0ab96d74a8
Ran the official @tailwindcss/upgrade tool: - tailwind.config.ts → @theme directive in globals.css - @tailwind base/components/utilities → @import 'tailwindcss' - postcss.config switched from tailwindcss + autoprefixer to @tailwindcss/postcss (autoprefixer baked in) - focus-visible:outline-none → focus-visible:outline-hidden (the v3 utility was a footgun — outline still showed in forced-colors mode) Reverted the migration tool's over-zealous variant="outline" → variant="outline-solid" rename on CVA prop values; that rename was meant for the Tailwind `outline:` utility, not our Button/Badge component variants. Swapped tailwindcss-animate (v3-style JS plugin) for tw-animate-css (v4-native @import). Same utility surface (animate-spin, animate-in, etc.), one fewer JS plugin in the bundle. Fixed the upgrade tool's malformed dark variant (@custom-variant dark (&:is(class *)) — `class` was being parsed as a tag) to canonical &:where(.dark, .dark *). Verified: tsc 0 errors, eslint 0 errors (16 pre-existing warnings), vitest 1315/1315, next build clean. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
80 lines
2.5 KiB
TypeScript
80 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useRef, type ReactNode } from 'react';
|
|
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import { Badge } from '@/components/ui/badge';
|
|
|
|
export interface ResponsiveTab {
|
|
id: string;
|
|
label: string;
|
|
content: ReactNode;
|
|
badge?: string | number;
|
|
}
|
|
|
|
interface ResponsiveTabsProps {
|
|
tabs: ResponsiveTab[];
|
|
value: string;
|
|
onValueChange: (value: string) => void;
|
|
}
|
|
|
|
/**
|
|
* Tab strip that scrolls horizontally on narrow viewports. The active tab is
|
|
* automatically scrolled into view so users can tell at a glance that more
|
|
* tabs exist beyond the visible edge.
|
|
*
|
|
* Previously this collapsed to a <Select> on phone widths, but that read as
|
|
* a generic dropdown and obscured the fact that multiple peer tabs exist.
|
|
*/
|
|
export function ResponsiveTabs({ tabs, value, onValueChange }: ResponsiveTabsProps) {
|
|
const listRef = useRef<HTMLDivElement>(null);
|
|
|
|
// Keep the active trigger in view when the value changes externally
|
|
// (e.g. ?tab= in the URL or a back/forward navigation).
|
|
useEffect(() => {
|
|
const root = listRef.current;
|
|
if (!root) return;
|
|
const active = root.querySelector<HTMLButtonElement>(`[data-tab-id="${CSS.escape(value)}"]`);
|
|
if (active) {
|
|
active.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' });
|
|
}
|
|
}, [value]);
|
|
|
|
return (
|
|
<Tabs value={value} onValueChange={onValueChange}>
|
|
{/* Single scrollable strip for all viewport widths.
|
|
The wrapper handles horizontal overflow with momentum scroll on
|
|
touch devices; the inner TabsList stays its natural width and
|
|
slides under the wrapper. */}
|
|
<div
|
|
ref={listRef}
|
|
className="overflow-x-auto -mx-2 px-2 scrollbar-none [&::-webkit-scrollbar]:hidden"
|
|
>
|
|
<TabsList className="inline-flex w-max">
|
|
{tabs.map((tab) => (
|
|
<TabsTrigger
|
|
key={tab.id}
|
|
value={tab.id}
|
|
className="gap-1.5 whitespace-nowrap"
|
|
data-tab-id={tab.id}
|
|
>
|
|
{tab.label}
|
|
{tab.badge !== undefined && tab.badge !== null && (
|
|
<Badge variant="secondary" className="px-1.5 py-0 text-xs">
|
|
{tab.badge}
|
|
</Badge>
|
|
)}
|
|
</TabsTrigger>
|
|
))}
|
|
</TabsList>
|
|
</div>
|
|
|
|
{tabs.map((tab) => (
|
|
<TabsContent key={tab.id} value={tab.id} className="mt-4">
|
|
{tab.content}
|
|
</TabsContent>
|
|
))}
|
|
</Tabs>
|
|
);
|
|
}
|