egutierrez
97a3c84625
Reescribe todos los componentes UI para usar Mantine v9 en lugar de shadcn/Tailwind. Elimina cn(), CVA, components.json, theme_provider custom y globals.css con Tailwind. Añade 25+ componentes nuevos (AppShell, AuthForm, DatePickerInput, Dropzone, etc.) y MantineProvider como wrapper estándar del sistema de temas. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
import * as React from "react"
|
|
import { Tabs as MantineTabs } from "@mantine/core"
|
|
|
|
interface TabsProps {
|
|
defaultValue?: string | null
|
|
value?: string | null
|
|
onTabChange?: (value: string | null) => void
|
|
orientation?: "horizontal" | "vertical"
|
|
variant?: "default" | "line"
|
|
className?: string
|
|
children?: React.ReactNode
|
|
}
|
|
|
|
function Tabs({ className, orientation = "horizontal", variant = "default", defaultValue, value, onTabChange, children, ...props }: TabsProps) {
|
|
return (
|
|
<MantineTabs
|
|
data-slot="tabs"
|
|
defaultValue={defaultValue}
|
|
value={value}
|
|
onChange={onTabChange}
|
|
orientation={orientation}
|
|
variant={variant === "line" ? "outline" : "default"}
|
|
className={className}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</MantineTabs>
|
|
)
|
|
}
|
|
|
|
function TabsList({ className, variant, children, ...props }: { className?: string; variant?: "default" | "line"; children?: React.ReactNode } & React.ComponentProps<typeof MantineTabs.List>) {
|
|
return (
|
|
<MantineTabs.List data-slot="tabs-list" className={className} {...props}>
|
|
{children}
|
|
</MantineTabs.List>
|
|
)
|
|
}
|
|
|
|
function TabsTrigger({ className, value, children, disabled, ...props }: { className?: string; value: string; children?: React.ReactNode; disabled?: boolean }) {
|
|
return (
|
|
<MantineTabs.Tab data-slot="tabs-trigger" value={value} disabled={disabled} className={className} {...props}>
|
|
{children}
|
|
</MantineTabs.Tab>
|
|
)
|
|
}
|
|
|
|
function TabsContent({ className, value, children, ...props }: { className?: string; value: string; children?: React.ReactNode }) {
|
|
return (
|
|
<MantineTabs.Panel data-slot="tabs-content" value={value} className={className} {...props}>
|
|
{children}
|
|
</MantineTabs.Panel>
|
|
)
|
|
}
|
|
|
|
export { Tabs, TabsList, TabsTrigger, TabsContent }
|