DenozordecandCursor
357ed4ce7b
Updated various dashboard components to improve layout and responsiveness. Adjusted class names to include 'min-w-0' for better handling of overflow and added flex properties to ensure proper alignment. Refined grid structures and skeleton loading states for a more cohesive user experience. Co-authored-by: Cursor <[email protected]>
78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
import { Skeleton } from '@evobgp/ui/components/skeleton'
|
|
|
|
import { KpiStatGrid } from '@/components/kpi-stat-grid'
|
|
import { panelCardInsetClassName } from '@/components/panel-card'
|
|
import {
|
|
chartPanelGridClassName,
|
|
dashboardMainSidebarClassName,
|
|
} from '@/lib/ui-surface'
|
|
|
|
export function KpiStatGridSkeleton({ count = 4 }: { count?: number }) {
|
|
return (
|
|
<KpiStatGrid
|
|
items={Array.from({ length: count }, (_, index) => ({
|
|
id: `kpi-skeleton-${index}`,
|
|
icon: <Skeleton className="size-4 rounded-sm" />,
|
|
value: <Skeleton className="h-8 w-16" />,
|
|
label: <Skeleton className="h-4 w-28" />,
|
|
footer: <Skeleton className="h-5 w-32 rounded-full" />,
|
|
}))}
|
|
aria-label="Загрузка показателей"
|
|
/>
|
|
)
|
|
}
|
|
|
|
/** @deprecated Use KpiStatGridSkeleton */
|
|
export function SectionCardsSkeleton({ count = 4 }: { count?: number }) {
|
|
return <KpiStatGridSkeleton count={count} />
|
|
}
|
|
|
|
/** Matches dashboard layout: KPI row, charts, main+sidebar, bottom grids. */
|
|
export function AnalyticsDashboardSkeleton() {
|
|
return (
|
|
<div className="@container flex flex-col gap-4">
|
|
<KpiStatGridSkeleton count={6} />
|
|
|
|
<div className={chartPanelGridClassName}>
|
|
<Skeleton className="h-72 w-full rounded-xl" />
|
|
<Skeleton className="h-72 w-full rounded-xl" />
|
|
</div>
|
|
|
|
<div className={dashboardMainSidebarClassName}>
|
|
<Skeleton className="h-96 w-full min-w-0 rounded-xl" />
|
|
<Skeleton className="h-96 w-full min-w-0 rounded-xl" />
|
|
</div>
|
|
|
|
<div className={chartPanelGridClassName}>
|
|
<Skeleton className="h-64 w-full rounded-xl" />
|
|
<Skeleton className="h-64 w-full rounded-xl" />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function KpiSparklineSkeleton({ count = 4 }: { count?: number }) {
|
|
return <KpiStatGridSkeleton count={count} />
|
|
}
|
|
|
|
export function TableSkeleton({ rows = 6, cols = 4 }: { rows?: number; cols?: number }) {
|
|
return (
|
|
<div className="overflow-hidden rounded-xl ring-1 ring-foreground/10">
|
|
<div className="flex flex-col">
|
|
<div className={`flex gap-2 border-b ${panelCardInsetClassName}`}>
|
|
{Array.from({ length: cols }).map((_, i) => (
|
|
<Skeleton className="h-4 flex-1" key={`h-${i}`} />
|
|
))}
|
|
</div>
|
|
{Array.from({ length: rows }).map((_, r) => (
|
|
<div className={`flex gap-2 border-b ${panelCardInsetClassName}`} key={`r-${r}`}>
|
|
{Array.from({ length: cols }).map((_, c) => (
|
|
<Skeleton className="h-4 flex-1" key={`c-${r}-${c}`} />
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|