74 lines
2.2 KiB
TypeScript
74 lines
2.2 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import * as TabsPrimitive from "@radix-ui/react-tabs"
|
|
|
|
import { cn } from "~/lib/utils"
|
|
|
|
function Tabs({
|
|
className,
|
|
...props
|
|
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
|
|
return (
|
|
<TabsPrimitive.Root
|
|
data-slot="tabs"
|
|
className={cn("flex flex-col gap-2", className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function TabsList({
|
|
className,
|
|
...props
|
|
}: React.ComponentProps<typeof TabsPrimitive.List>) {
|
|
return (
|
|
<TabsPrimitive.List
|
|
data-slot="tabs-list"
|
|
className={cn(
|
|
// Subframe Tabs layout: full-width underline strip (TabsRoot: "flex w-full items-end")
|
|
"flex w-full items-end",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function TabsTrigger({
|
|
className,
|
|
...props
|
|
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
|
|
return (
|
|
<TabsPrimitive.Trigger
|
|
data-slot="tabs-trigger"
|
|
className={cn(
|
|
// Subframe Tabs.Item layout: underline tab (rounded-top, 2px bottom border, brand on active)
|
|
"group flex flex-1 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-t-md border-b-2 border-solid border-border-default bg-surface-neutral-secondary px-4 py-2.5 text-sm text-text-neutral-secondary transition-colors",
|
|
"hover:border-brand-brand-border-solid-default hover:bg-surface-neutral-primary hover:text-text-neutral-primary",
|
|
"focus-visible:shadow-focus focus-visible:outline-none",
|
|
"data-[state=active]:border-brand-brand-border-solid-default data-[state=active]:bg-surface-neutral-tertiary data-[state=active]:font-medium data-[state=active]:text-text-neutral-primary",
|
|
"disabled:pointer-events-none disabled:border-border-disabled disabled:bg-surface-neutral-disabled disabled:text-text-neutral-disabled",
|
|
"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function TabsContent({
|
|
className,
|
|
...props
|
|
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
|
|
return (
|
|
<TabsPrimitive.Content
|
|
data-slot="tabs-content"
|
|
className={cn("flex-1 outline-none", className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export { Tabs, TabsList, TabsTrigger, TabsContent }
|