egutierrez
2d108c295a
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>
103 lines
2.2 KiB
TypeScript
103 lines
2.2 KiB
TypeScript
import * as React from 'react'
|
|
import { Paper, Box, Text } from '@mantine/core'
|
|
|
|
type CardVariant = 'default' | 'borderless' | 'ghost'
|
|
|
|
function Card({
|
|
className,
|
|
size = 'default',
|
|
variant = 'default',
|
|
children,
|
|
...props
|
|
}: React.ComponentProps<'div'> & { size?: 'default' | 'sm'; variant?: CardVariant }) {
|
|
return (
|
|
<Paper
|
|
data-slot="card"
|
|
data-size={size}
|
|
data-variant={variant}
|
|
withBorder={variant === 'default'}
|
|
shadow={variant === 'default' ? 'xs' : undefined}
|
|
radius="md"
|
|
p={size === 'sm' ? 'sm' : 'md'}
|
|
bg={variant === 'ghost' ? 'transparent' : undefined}
|
|
className={className}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</Paper>
|
|
)
|
|
}
|
|
|
|
function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
|
|
return (
|
|
<Box
|
|
data-slot="card-header"
|
|
pb="xs"
|
|
className={className}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
|
|
return (
|
|
<Text
|
|
component="div"
|
|
data-slot="card-title"
|
|
fw={600}
|
|
size="sm"
|
|
className={className}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
|
|
return (
|
|
<Text
|
|
component="div"
|
|
data-slot="card-description"
|
|
size="sm"
|
|
c="dimmed"
|
|
className={className}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function CardAction({ className, style, ...props }: React.ComponentProps<'div'>) {
|
|
return (
|
|
<Box
|
|
data-slot="card-action"
|
|
style={{ position: 'absolute', top: 0, right: 0, ...style }}
|
|
className={className}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
|
|
return (
|
|
<Box
|
|
data-slot="card-content"
|
|
className={className}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
|
|
return (
|
|
<Box
|
|
data-slot="card-footer"
|
|
pt="sm"
|
|
mt="auto"
|
|
style={{ borderTop: '1px solid var(--mantine-color-default-border)' }}
|
|
className={className}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent }
|