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]>
43 lines
1.8 KiB
TypeScript
43 lines
1.8 KiB
TypeScript
/**
|
||
* EvoBGP UI surface contract (ReUI Pro).
|
||
*
|
||
* Ops / list / dashboard / detail / settings: **Frame** only.
|
||
* KPI tiles: **stats-12** via `KpiStatGrid` / `reui-kit/KpiStatGrid`.
|
||
* Lists: Frame + DataGrid (`ResourcePage` / `DataGridSection`), not Card shell.
|
||
*
|
||
* @see https://reui.io/preview/base/stats-12
|
||
* @see https://reui.io/preview/base/dashboard-1
|
||
* @see https://reui.io/preview/base/data-grid-filtering-2
|
||
* @see docs/ui-design-contract.md
|
||
*/
|
||
export const UI_SURFACE = 'frame' as const
|
||
|
||
/** Skip link — keyboard: first Tab. */
|
||
export const SKIP_TO_CONTENT_CLASS =
|
||
'bg-background text-foreground ring-ring sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-50 focus:rounded-md focus:px-3 focus:py-2 focus:text-sm focus:font-medium focus:shadow-sm focus:ring-2'
|
||
|
||
/** Grid for ReUI stats-12 KPI rows (3–6 tiles). */
|
||
export const kpiStatGridClassName = '@container w-full'
|
||
|
||
/** @deprecated Use kpiStatGridClassName — kept for legacy imports. */
|
||
export const dashboardKpiGridClassName = kpiStatGridClassName
|
||
|
||
/** @deprecated Sparkline KPI row replaced by stats-12 grid. */
|
||
export const kpiGridClassName =
|
||
'grid grid-cols-1 gap-5 @3xl:grid-cols-2 @6xl:grid-cols-4'
|
||
|
||
/** @deprecated */
|
||
export const kpiCardContentClassName = 'flex flex-col items-start gap-4 p-5'
|
||
|
||
/** Two-column chart panel row (monitoring / network overview). */
|
||
export const chartPanelGridClassName =
|
||
'grid min-w-0 grid-cols-1 items-start gap-4 @5xl:grid-cols-2'
|
||
|
||
/**
|
||
* Main + sidebar: stack until the dashboard container is wide enough.
|
||
* Do not nest this inside another 2-col grid — that squeezes modules/timeline.
|
||
* @see https://reui.io/preview/base/dashboard-1
|
||
*/
|
||
export const dashboardMainSidebarClassName =
|
||
'grid min-w-0 grid-cols-1 items-start gap-4 @5xl:grid-cols-2'
|