refactor: migrate frontend from shadcn/Tailwind to Mantine v9
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>
This commit is contained in:
@@ -1,100 +1,43 @@
|
||||
import * as React from "react"
|
||||
import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
|
||||
import { cn } from "../core/cn"
|
||||
import { buttonVariants } from "./button"
|
||||
import { Pagination as MantinePagination } from "@mantine/core"
|
||||
|
||||
function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
|
||||
interface PaginationProps {
|
||||
total: number
|
||||
value?: number
|
||||
defaultValue?: number
|
||||
onChange?: (page: number) => void
|
||||
siblings?: number
|
||||
boundaries?: number
|
||||
withEdges?: boolean
|
||||
className?: string
|
||||
}
|
||||
|
||||
function Pagination({
|
||||
total,
|
||||
value,
|
||||
defaultValue,
|
||||
onChange,
|
||||
siblings,
|
||||
boundaries,
|
||||
withEdges = false,
|
||||
className,
|
||||
...props
|
||||
}: PaginationProps) {
|
||||
return (
|
||||
<nav
|
||||
<MantinePagination
|
||||
data-slot="pagination"
|
||||
role="navigation"
|
||||
aria-label="pagination"
|
||||
className={cn("mx-auto flex w-full justify-center", className)}
|
||||
total={total}
|
||||
value={value}
|
||||
defaultValue={defaultValue}
|
||||
onChange={onChange}
|
||||
siblings={siblings}
|
||||
boundaries={boundaries}
|
||||
withEdges={withEdges}
|
||||
className={className}
|
||||
size="sm"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function PaginationContent({ className, ...props }: React.ComponentProps<"ul">) {
|
||||
return (
|
||||
<ul
|
||||
data-slot="pagination-content"
|
||||
className={cn("flex flex-row items-center gap-1", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function PaginationItem({ ...props }: React.ComponentProps<"li">) {
|
||||
return <li data-slot="pagination-item" {...props} />
|
||||
}
|
||||
|
||||
type PaginationLinkProps = {
|
||||
isActive?: boolean
|
||||
disabled?: boolean
|
||||
size?: "icon" | "default" | "sm" | "lg"
|
||||
} & React.ComponentProps<"a">
|
||||
|
||||
function PaginationLink({ className, isActive, disabled, size = "icon", ...props }: PaginationLinkProps) {
|
||||
return (
|
||||
<a
|
||||
data-slot="pagination-link"
|
||||
aria-current={isActive ? "page" : undefined}
|
||||
aria-disabled={disabled}
|
||||
className={cn(
|
||||
buttonVariants({ variant: isActive ? "outline" : "ghost", size }),
|
||||
disabled && "pointer-events-none opacity-50",
|
||||
isActive && "border-border font-medium",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function PaginationPrevious({ className, ...props }: React.ComponentProps<"a">) {
|
||||
return (
|
||||
<PaginationLink
|
||||
data-slot="pagination-previous"
|
||||
aria-label="Go to previous page"
|
||||
size="default"
|
||||
className={cn("gap-1 px-2.5 pl-2", className)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronLeftIcon className="size-4" />
|
||||
<span>Previous</span>
|
||||
</PaginationLink>
|
||||
)
|
||||
}
|
||||
|
||||
function PaginationNext({ className, ...props }: React.ComponentProps<"a">) {
|
||||
return (
|
||||
<PaginationLink
|
||||
data-slot="pagination-next"
|
||||
aria-label="Go to next page"
|
||||
size="default"
|
||||
className={cn("gap-1 px-2.5 pr-2", className)}
|
||||
{...props}
|
||||
>
|
||||
<span>Next</span>
|
||||
<ChevronRightIcon className="size-4" />
|
||||
</PaginationLink>
|
||||
)
|
||||
}
|
||||
|
||||
function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
data-slot="pagination-ellipsis"
|
||||
aria-hidden
|
||||
className={cn("flex size-8 items-center justify-center text-muted-foreground", className)}
|
||||
{...props}
|
||||
>
|
||||
<MoreHorizontalIcon className="size-4" />
|
||||
<span className="sr-only">More pages</span>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious }
|
||||
export type { PaginationLinkProps }
|
||||
export { Pagination }
|
||||
export type { PaginationProps }
|
||||
|
||||
Reference in New Issue
Block a user