Tabs

1import { Tabs as KobalteTabs } from "@kobalte/core/tabs";
2import type { Component, ComponentProps } from "solid-js";
3import { splitProps } from "solid-js";
4import { cn } from "~/lib/utils";
5 
6const Tabs = KobalteTabs;
7 
8const TabsList: Component<ComponentProps<typeof KobalteTabs.List>> = (props) => {
9  const [local, rest] = splitProps(props, ["class"]);
10  return (
11    <KobalteTabs.List
12      class={cn(
13        "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
14        local.class,
15      )}
16      {...rest}
17    />
18  );
19};
20 
21const TabsTrigger: Component<ComponentProps<typeof KobalteTabs.Trigger>> = (props) => {
22  const [local, rest] = splitProps(props, ["class"]);
23  return (
24    <KobalteTabs.Trigger
25      class={cn(
26        "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium",
27        "ring-offset-background transition-all",
28        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
29        "disabled:pointer-events-none disabled:opacity-50",
30        "data-[selected]:bg-background data-[selected]:text-foreground data-[selected]:shadow-sm",
31        local.class,
32      )}
33      {...rest}
34    />
35  );
36};
37 
38const TabsContent: Component<ComponentProps<typeof KobalteTabs.Content>> = (props) => {
39  const [local, rest] = splitProps(props, ["class"]);
40  return (
41    <KobalteTabs.Content
42      class={cn(
43        "mt-2 ring-offset-background",
44        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
45        local.class,
46      )}
47      {...rest}
48    />
49  );
50};
51 
52const TabsIndicator: Component<ComponentProps<typeof KobalteTabs.Indicator>> = (props) => {
53  const [local, rest] = splitProps(props, ["class"]);
54  return (
55    <KobalteTabs.Indicator
56      class={cn("absolute transition-all duration-200", local.class)}
57      {...rest}
58    />
59  );
60};
61 
62export { Tabs, TabsList, TabsTrigger, TabsContent, TabsIndicator };