57 lines
1.9 KiB
TypeScript
57 lines
1.9 KiB
TypeScript
import { useRef } from 'react';
|
|
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
|
|
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
|
|
type TabsProps = {
|
|
tabList: { value: string; label: string }[];
|
|
activeTab: string;
|
|
setActiveTab: (tab: string) => void;
|
|
};
|
|
const TabsComponent = (props: TabsProps) => {
|
|
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="Filter" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{tabList.map((f) => (
|
|
<SelectItem key={f.value} value={f.value}>
|
|
{f.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export { TabsComponent as Tabs };
|