2d1b50745a
Adds <ResponsiveTabs> primitive that swaps the TabsList for a native Select on phone-sized viewports (<640px). DetailLayout now routes its tab strip through it, so every tabbed detail page gets the collapse for free. DataTable wraps the Table in overflow-x-auto so wide column sets scroll horizontally instead of breaking the layout under 768px. Documents-hub row swaps the fixed grid-cols-[auto_1fr_auto_auto_auto_auto] for flex-wrap below sm: so signers / status / dates stack instead of clipping. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
78 lines
2.2 KiB
TypeScript
78 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import { type ReactNode } from 'react';
|
|
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select';
|
|
|
|
export interface ResponsiveTab {
|
|
id: string;
|
|
label: string;
|
|
content: ReactNode;
|
|
badge?: string | number;
|
|
}
|
|
|
|
interface ResponsiveTabsProps {
|
|
tabs: ResponsiveTab[];
|
|
value: string;
|
|
onValueChange: (value: string) => void;
|
|
}
|
|
|
|
/**
|
|
* Tabs that collapse to a native <Select> on phone-sized viewports.
|
|
* Above sm: TabsList renders. At/below sm: a Select dropdown replaces the tab strip.
|
|
*/
|
|
export function ResponsiveTabs({ tabs, value, onValueChange }: ResponsiveTabsProps) {
|
|
return (
|
|
<Tabs value={value} onValueChange={onValueChange}>
|
|
{/* Mobile: select dropdown */}
|
|
<div className="sm:hidden">
|
|
<Select value={value} onValueChange={onValueChange}>
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{tabs.map((tab) => (
|
|
<SelectItem key={tab.id} value={tab.id}>
|
|
<span className="flex items-center gap-1.5">
|
|
{tab.label}
|
|
{tab.badge !== undefined && tab.badge !== null && (
|
|
<span className="text-xs text-muted-foreground">({tab.badge})</span>
|
|
)}
|
|
</span>
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* Desktop / tablet: tab strip */}
|
|
<TabsList className="hidden sm:flex">
|
|
{tabs.map((tab) => (
|
|
<TabsTrigger key={tab.id} value={tab.id} className="gap-1.5">
|
|
{tab.label}
|
|
{tab.badge !== undefined && tab.badge !== null && (
|
|
<Badge variant="secondary" className="px-1.5 py-0 text-xs">
|
|
{tab.badge}
|
|
</Badge>
|
|
)}
|
|
</TabsTrigger>
|
|
))}
|
|
</TabsList>
|
|
|
|
{tabs.map((tab) => (
|
|
<TabsContent key={tab.id} value={tab.id} className="mt-4">
|
|
{tab.content}
|
|
</TabsContent>
|
|
))}
|
|
</Tabs>
|
|
);
|
|
}
|