CI / changes (push) Successful in 11s
CI / commitlint (push) Has been skipped
CI / openapi (push) Has been skipped
CI / web (push) Successful in 1m7s
CI / go (push) Has been skipped
CI / bird2 (push) Has been skipped
CI / release (push) Successful in 4m20s
Updated the AnalyticsDashboardSkeleton to utilize a new grid layout for KPI tiles, increasing the number of displayed items and adjusting their size for better visibility. Modified the SettingsSettingField component to accept a ReactNode for the description, allowing for richer content. Refactored the Settings component to improve the organization of API token management and session status display, enhancing clarity and usability. Additionally, integrated new UI elements for theme selection and improved layout consistency across components.
31 lines
1.2 KiB
TypeScript
31 lines
1.2 KiB
TypeScript
/**
|
|
* EvoBGP UI surface contract (ReUI Pro).
|
|
*
|
|
* Primary surface: **Card** via `PanelCard` / `DataGridCard`.
|
|
* All route-level panels, KPI tiles, charts and data grids use shadcn Card —
|
|
* not ReUI Frame — for visual consistency across screens.
|
|
*
|
|
* ReUI Frame blocks from registry are adapted into Card composition when installed.
|
|
*
|
|
* @see https://reui.io/blocks — card category
|
|
* @see `.agents/skills/shadcn-react/SKILL.md`
|
|
*/
|
|
export const UI_SURFACE = 'card' as const
|
|
|
|
/** Shared padding for KPI / metric tiles inside PanelCard. */
|
|
export const kpiCardContentClassName = 'flex flex-col items-start gap-4 p-5'
|
|
|
|
/** Compact 6-tile KPI row on dashboard overview. */
|
|
export const dashboardKpiGridClassName =
|
|
'grid grid-cols-2 gap-3 sm:grid-cols-3 xl:grid-cols-6'
|
|
|
|
/** Grid for dashboard-5 style KPI sparkline row (4 columns at xl). */
|
|
export const kpiGridClassName =
|
|
'grid grid-cols-1 gap-4 @3xl:grid-cols-2 @6xl:grid-cols-4'
|
|
|
|
/** Two-column chart panel row (monitoring / network overview). */
|
|
export const chartPanelGridClassName = 'grid grid-cols-1 gap-4 @5xl:grid-cols-2'
|
|
|
|
/** Main + sidebar layout (8+4) used on dashboard. */
|
|
export const dashboardMainSidebarClassName = 'grid gap-4 xl:grid-cols-12 xl:items-start'
|