pastilhas
5ce1a2928e
The DataTable's pagination carries the only interpolated strings in this area
('Showing page {{current}} of {{total}}', '{{size}} / page'). No plural forms:
nothing here is a count-varying noun, so inventing one would only add a key
nobody uses.
DataTable.test.tsx now renders inside an I18nProvider with the real en-GB
catalog, so it still asserts the English a user sees rather than a dot-path.
Left/right utilities became logical (ms-/me-/ps-/pe-/start-) per D3.
59 lines
2.1 KiB
TypeScript
59 lines
2.1 KiB
TypeScript
import { useRef } from 'react';
|
|
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
|
|
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import { useTranslation } from '@/components/locales';
|
|
|
|
type TabsProps = {
|
|
tabList: { value: string; label: string }[];
|
|
activeTab: string;
|
|
setActiveTab: (tab: string) => void;
|
|
};
|
|
const TabsComponent = (props: TabsProps) => {
|
|
const { t } = useTranslation();
|
|
const { tabList, activeTab, setActiveTab } = props;
|
|
const tabsListRef = useRef<HTMLDivElement>(null);
|
|
return (
|
|
<div>
|
|
<div className="hidden lg:inline-block">
|
|
<Tabs value={activeTab} onValueChange={setActiveTab}>
|
|
<TabsList
|
|
ref={tabsListRef}
|
|
className="bg-muted text-muted-foreground inline-flex !h-auto items-center rounded-md p-1"
|
|
>
|
|
{tabList.map((filter) => (
|
|
<TabsTrigger
|
|
key={filter.value}
|
|
value={filter.value}
|
|
className={[
|
|
'rounded-md !px-5 !py-2 text-sm font-medium transition-all',
|
|
'text-muted-foreground hover:bg-muted hover:text-foreground',
|
|
'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
|
|
'leading-normal ring-0 focus-visible:ring-0',
|
|
].join(' ')}
|
|
>
|
|
{filter.label}
|
|
</TabsTrigger>
|
|
))}
|
|
</TabsList>
|
|
</Tabs>
|
|
</div>
|
|
<div className="block lg:hidden">
|
|
<Select value={activeTab} onValueChange={(v) => setActiveTab(v)}>
|
|
<SelectTrigger className="w-40">
|
|
<SelectValue placeholder={t('tabs.filterPlaceholder')} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{tabList.map((f) => (
|
|
<SelectItem key={f.value} value={f.value}>
|
|
{f.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export { TabsComponent as Tabs };
|