68 lines
2.3 KiB
TypeScript
68 lines
2.3 KiB
TypeScript
import * as React from "react"
|
|
import {
|
|
Root as TabsRootPrimitive,
|
|
List as TabsListPrimitive,
|
|
Trigger as TabsTriggerPrimitive,
|
|
Content as TabsContentPrimitive,
|
|
type TabsProps as TabsPrimitiveProps,
|
|
type TabsListProps as TabsPrimitiveListProps,
|
|
type TabsTriggerProps as TabsPrimitiveTriggerProps,
|
|
type TabsContentProps as TabsPrimitiveContentProps,
|
|
} from "@radix-ui/react-tabs"
|
|
|
|
import { cn } from "../../lib/utils"
|
|
|
|
type TabsProps = TabsPrimitiveProps & { className?: string }
|
|
type TabsListProps = TabsPrimitiveListProps & { className?: string }
|
|
type TabsTriggerProps = TabsPrimitiveTriggerProps & { className?: string }
|
|
type TabsContentProps = TabsPrimitiveContentProps & { className?: string }
|
|
|
|
const TabsRoot = TabsRootPrimitive as unknown as React.ComponentType<TabsProps>
|
|
const TabsListBase = TabsListPrimitive as unknown as React.ComponentType<TabsListProps>
|
|
const TabsTriggerBase = TabsTriggerPrimitive as unknown as React.ComponentType<TabsTriggerProps>
|
|
const TabsContentBase = TabsContentPrimitive as unknown as React.ComponentType<TabsContentProps>
|
|
|
|
export function Tabs({ className, ...props }: TabsProps) {
|
|
return (
|
|
<TabsRoot
|
|
data-slot="tabs"
|
|
className={cn("flex flex-col gap-2", className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export function TabsList({ className, ...props }: TabsListProps) {
|
|
return (
|
|
<TabsListBase
|
|
data-slot="tabs-list"
|
|
className={cn("inline-flex h-9 w-fit items-center justify-center rounded-lg bg-slate-100 p-[3px] text-slate-600", className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export function TabsTrigger({ className, value, ...props }: TabsTriggerProps) {
|
|
return (
|
|
<TabsTriggerBase
|
|
data-slot="tabs-trigger"
|
|
className={cn(
|
|
"inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1 text-sm font-medium text-slate-800 transition-[color,box-shadow] data-[state=active]:bg-white data-[state=active]:shadow-sm",
|
|
className
|
|
)}
|
|
value={value}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export function TabsContent({ className, value, ...props }: TabsContentProps) {
|
|
return (
|
|
<TabsContentBase
|
|
data-slot="tabs-content"
|
|
className={cn("flex-1 outline-none", className)}
|
|
value={value}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|