fix: corrige tipagem do componente de abas
This commit is contained in:
parent
c00b4300c1
commit
0e97e4c0d6
1 changed files with 42 additions and 10 deletions
|
|
@ -1,15 +1,40 @@
|
|||
import * as React from "react"
|
||||
import * as TabsPrimitive from "@radix-ui/react-tabs"
|
||||
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"
|
||||
|
||||
export function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
|
||||
return <TabsPrimitive.Root data-slot="tabs" className={cn("flex flex-col gap-2", className)} {...props} />
|
||||
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 }: React.ComponentProps<typeof TabsPrimitive.List>) {
|
||||
export function TabsList({ className, ...props }: TabsListProps) {
|
||||
return (
|
||||
<TabsPrimitive.List
|
||||
<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}
|
||||
|
|
@ -17,20 +42,27 @@ export function TabsList({ className, ...props }: React.ComponentProps<typeof Ta
|
|||
)
|
||||
}
|
||||
|
||||
export function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
|
||||
export function TabsTrigger({ className, value, ...props }: TabsTriggerProps) {
|
||||
return (
|
||||
<TabsPrimitive.Trigger
|
||||
<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, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
|
||||
return <TabsPrimitive.Content data-slot="tabs-content" className={cn("flex-1 outline-none", className)} {...props} />
|
||||
export function TabsContent({ className, value, ...props }: TabsContentProps) {
|
||||
return (
|
||||
<TabsContentBase
|
||||
data-slot="tabs-content"
|
||||
className={cn("flex-1 outline-none", className)}
|
||||
value={value}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue