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>
54 lines
1.2 KiB
TypeScript
54 lines
1.2 KiB
TypeScript
import * as React from 'react'
|
|
import { SimpleGrid, Paper, Text } from '@mantine/core'
|
|
|
|
interface DashboardWidget {
|
|
id: string
|
|
title?: string
|
|
span?: 1 | 2 | 3 | 4
|
|
rowSpan?: 1 | 2
|
|
content: React.ReactNode
|
|
}
|
|
|
|
interface DashboardLayoutProps {
|
|
widgets: DashboardWidget[]
|
|
columns?: 1 | 2 | 3 | 4
|
|
gap?: 'sm' | 'md' | 'lg'
|
|
className?: string
|
|
}
|
|
|
|
const gapMap = { sm: 'xs', md: 'md', lg: 'lg' } as const
|
|
|
|
export function dashboardLayout({
|
|
widgets,
|
|
columns = 4,
|
|
gap = 'md',
|
|
}: DashboardLayoutProps): React.ReactElement {
|
|
return (
|
|
<SimpleGrid
|
|
cols={{ base: 1, md: Math.min(columns, 2), lg: columns }}
|
|
spacing={gapMap[gap]}
|
|
>
|
|
{widgets.map((widget) => (
|
|
<Paper
|
|
key={widget.id}
|
|
p="md"
|
|
withBorder
|
|
shadow="xs"
|
|
radius="md"
|
|
style={{
|
|
gridColumn: widget.span && widget.span > 1 ? `span ${widget.span}` : undefined,
|
|
gridRow: widget.rowSpan === 2 ? 'span 2' : undefined,
|
|
}}
|
|
>
|
|
{widget.title && (
|
|
<Text size="sm" fw={500} c="dimmed" mb="sm">{widget.title}</Text>
|
|
)}
|
|
{widget.content}
|
|
</Paper>
|
|
))}
|
|
</SimpleGrid>
|
|
)
|
|
}
|
|
|
|
export type { DashboardWidget, DashboardLayoutProps }
|