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 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"
|
import { cn } from "../../lib/utils"
|
||||||
|
|
||||||
export function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
|
type TabsProps = TabsPrimitiveProps & { className?: string }
|
||||||
return <TabsPrimitive.Root data-slot="tabs" className={cn("flex flex-col gap-2", className)} {...props} />
|
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 (
|
return (
|
||||||
<TabsPrimitive.List
|
<TabsListBase
|
||||||
data-slot="tabs-list"
|
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)}
|
className={cn("inline-flex h-9 w-fit items-center justify-center rounded-lg bg-slate-100 p-[3px] text-slate-600", className)}
|
||||||
{...props}
|
{...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 (
|
return (
|
||||||
<TabsPrimitive.Trigger
|
<TabsTriggerBase
|
||||||
data-slot="tabs-trigger"
|
data-slot="tabs-trigger"
|
||||||
className={cn(
|
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",
|
"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
|
className
|
||||||
)}
|
)}
|
||||||
|
value={value}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
|
export function TabsContent({ className, value, ...props }: TabsContentProps) {
|
||||||
return <TabsPrimitive.Content data-slot="tabs-content" className={cn("flex-1 outline-none", className)} {...props} />
|
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