egutierrez
953f598b9b
Componentes React reutilizables: card, dialog, tabs, select, alert, badge, button, input, label, skeleton, tooltip, progress_bar, page_header, form_field, settings_page, crud_page, analytics_page, dashboard_layout. Charts: area, bar, line, sparkline, kpi_card, chart_container. Hooks Wails: use_wails_query, use_wails_mutation, use_wails_stream, use_wails_event, use_animated_canvas. Funciones core: cn, format_compact, chart_colors, get_series_color, wails_cache, theme_config_to_colors. Tipos: chart_series, wails_ipc, theme_config, component_variants. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
55 lines
2.2 KiB
TypeScript
55 lines
2.2 KiB
TypeScript
import * as React from "react"
|
|
import { cn } from "../core/cn"
|
|
|
|
function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
|
|
return <div data-slot="skeleton" className={cn("animate-pulse rounded-md bg-muted", className)} {...props} />
|
|
}
|
|
|
|
function SkeletonText({ className, lines = 3, ...props }: React.HTMLAttributes<HTMLDivElement> & { lines?: number }) {
|
|
return (
|
|
<div className={cn("space-y-2", className)} {...props}>
|
|
{Array.from({ length: lines }).map((_, i) => (
|
|
<Skeleton key={i} className={cn("h-4", i === lines - 1 ? "w-4/5" : "w-full")} />
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function SkeletonCard({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
|
|
return (
|
|
<div className={cn("space-y-3", className)} {...props}>
|
|
<Skeleton className="h-[180px] w-full rounded-lg" />
|
|
<Skeleton className="h-4 w-3/4" />
|
|
<Skeleton className="h-4 w-1/2" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function SkeletonAvatar({ className, size = "md", ...props }: React.HTMLAttributes<HTMLDivElement> & { size?: "xs" | "sm" | "md" | "lg" | "xl" }) {
|
|
const sizeClasses = { xs: "size-6", sm: "size-8", md: "size-10", lg: "size-12", xl: "size-16" }
|
|
return <Skeleton className={cn("rounded-full", sizeClasses[size], className)} {...props} />
|
|
}
|
|
|
|
function SkeletonButton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
|
|
return <Skeleton className={cn("h-8 w-24 rounded-lg", className)} {...props} />
|
|
}
|
|
|
|
function SkeletonTable({ className, rows = 5, columns = 4, ...props }: React.HTMLAttributes<HTMLDivElement> & { rows?: number; columns?: number }) {
|
|
return (
|
|
<div className={cn("space-y-3", className)} {...props}>
|
|
<div className="flex gap-4">
|
|
{Array.from({ length: columns }).map((_, i) => <Skeleton key={i} className="h-4 flex-1" />)}
|
|
</div>
|
|
<div className="space-y-2">
|
|
{Array.from({ length: rows }).map((_, rowIndex) => (
|
|
<div key={rowIndex} className="flex gap-4">
|
|
{Array.from({ length: columns }).map((_, colIndex) => <Skeleton key={colIndex} className="h-4 flex-1" />)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export { Skeleton, SkeletonAvatar, SkeletonButton, SkeletonCard, SkeletonTable, SkeletonText }
|