first

2026-02-16 19:34:35 +00:00
commit 9ab0940ca4
784 changed files with 41710 additions and 0 deletions
@@ -0,0 +1,56 @@
+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 };