Tabs

1import { Tabs as BaseTabs } from "@base-ui/react/tabs";
2import { cn } from "@/lib/utils";
3 
4function Tabs({ className, ...props }: BaseTabs.Root.Props) {
5  return <BaseTabs.Root {...props} className={cn("overflow-hidden outline-none", className)} />;
6}
7 
8function TabsList({ className, ...props }: BaseTabs.List.Props) {
9  return (
10    <div
11      className={cn(
12        "relative",
13        'before:pointer-events-none before:absolute before:top-0 before:left-0 before:z-10 before:h-full before:w-2 before:bg-gradient-to-r before:from-white-1000 before:to-transparent before:content-[""] dark:before:from-grey-800',
14        'after:pointer-events-none after:absolute after:top-0 after:right-0 after:z-10 after:h-full after:w-2 after:bg-gradient-to-l after:from-white-1000 after:to-transparent after:content-[""] dark:after:from-grey-800',
15      )}
16    >
17      <BaseTabs.List
18        {...props}
19        className={cn("no-scrollbar flex gap-1 overflow-x-auto outline-none", className)}
20      >
21        {props.children}
22      </BaseTabs.List>
23    </div>
24  );
25}
26 
27function Tab({ className, ...props }: BaseTabs.Tab.Props) {
28  return (
29    <BaseTabs.Tab
30      {...props}
31      className={cn(
32        "typography-body-medium h-6 shrink-0 rounded-md px-2 text-black-500 outline-none hover:bg-grey-100 focus-visible:inset-ring focus-visible:inset-ring-blue-500 data-active:bg-grey-100 data-active:font-[500] data-active:text-black-1000 dark:text-white-500 dark:hover:bg-grey-700 dark:data-active:bg-grey-700 dark:data-active:text-white-1000",
33        className,
34      )}
35    />
36  );
37}
38 
39function TabsPanel({ className, ...props }: BaseTabs.Panel.Props) {
40  return <BaseTabs.Panel {...props} className={cn("outline-none", className)} />;
41}
42 
43export { Tabs, TabsList, Tab, TabsPanel };