feat(network): add asset style lab mockups
This commit is contained in:
chihlasm
@@ -9,6 +9,10 @@ import {
|
||||
export interface DeviceRenderConfig {
|
||||
icon: LucideIcon
|
||||
color: string
|
||||
accentClass: string
|
||||
surfaceClass: string
|
||||
category: string
|
||||
glyph: string
|
||||
}
|
||||
|
||||
// Category-semantic color palette — each color carries meaning:
|
||||
@@ -27,62 +31,109 @@ export const STORAGE_COLOR = '#a78bfa'
|
||||
export const CLOUD_COLOR = '#67e8f9'
|
||||
export const INFRA_COLOR = '#94a3b8'
|
||||
|
||||
const CATEGORY_STYLES: Record<string, Pick<DeviceRenderConfig, 'accentClass' | 'surfaceClass'>> = {
|
||||
network: {
|
||||
accentClass: 'border-sky-400/40 bg-sky-400/12 text-sky-300',
|
||||
surfaceClass: 'from-sky-400/12 via-sky-400/4 to-transparent',
|
||||
},
|
||||
security: {
|
||||
accentClass: 'border-rose-400/40 bg-rose-400/12 text-rose-300',
|
||||
surfaceClass: 'from-rose-400/12 via-rose-400/4 to-transparent',
|
||||
},
|
||||
compute: {
|
||||
accentClass: 'border-emerald-400/40 bg-emerald-400/12 text-emerald-300',
|
||||
surfaceClass: 'from-emerald-400/12 via-emerald-400/4 to-transparent',
|
||||
},
|
||||
storage: {
|
||||
accentClass: 'border-violet-400/40 bg-violet-400/12 text-violet-300',
|
||||
surfaceClass: 'from-violet-400/12 via-violet-400/4 to-transparent',
|
||||
},
|
||||
cloud: {
|
||||
accentClass: 'border-cyan-400/40 bg-cyan-400/12 text-cyan-300',
|
||||
surfaceClass: 'from-cyan-400/12 via-cyan-400/4 to-transparent',
|
||||
},
|
||||
endpoint: {
|
||||
accentClass: 'border-amber-400/40 bg-amber-400/12 text-amber-300',
|
||||
surfaceClass: 'from-amber-400/12 via-amber-400/4 to-transparent',
|
||||
},
|
||||
infrastructure: {
|
||||
accentClass: 'border-slate-400/40 bg-slate-300/10 text-slate-300',
|
||||
surfaceClass: 'from-slate-300/10 via-slate-300/4 to-transparent',
|
||||
},
|
||||
}
|
||||
|
||||
function makeConfig(
|
||||
icon: LucideIcon,
|
||||
color: string,
|
||||
category: string,
|
||||
glyph: string,
|
||||
): DeviceRenderConfig {
|
||||
return {
|
||||
icon,
|
||||
color,
|
||||
category,
|
||||
glyph,
|
||||
accentClass: CATEGORY_STYLES[category]?.accentClass ?? CATEGORY_STYLES.infrastructure.accentClass,
|
||||
surfaceClass: CATEGORY_STYLES[category]?.surfaceClass ?? CATEGORY_STYLES.infrastructure.surfaceClass,
|
||||
}
|
||||
}
|
||||
|
||||
const SYSTEM_DEVICE_ICONS: Record<string, DeviceRenderConfig> = {
|
||||
// Network layer
|
||||
'router': { icon: Router, color: NETWORK_COLOR },
|
||||
'switch': { icon: Network, color: NETWORK_COLOR },
|
||||
'access-point': { icon: Wifi, color: NETWORK_COLOR },
|
||||
'load-balancer': { icon: Gauge, color: NETWORK_COLOR },
|
||||
'router': makeConfig(Router, NETWORK_COLOR, 'network', 'RTR'),
|
||||
'switch': makeConfig(Network, NETWORK_COLOR, 'network', 'SW'),
|
||||
'access-point': makeConfig(Wifi, NETWORK_COLOR, 'network', 'AP'),
|
||||
'load-balancer': makeConfig(Gauge, NETWORK_COLOR, 'network', 'LB'),
|
||||
|
||||
// Security
|
||||
'firewall': { icon: BrickWallFire, color: SECURITY_COLOR },
|
||||
'badge-reader': { icon: KeyRound, color: SECURITY_COLOR },
|
||||
'firewall': makeConfig(BrickWallFire, SECURITY_COLOR, 'security', 'FW'),
|
||||
'badge-reader': makeConfig(KeyRound, SECURITY_COLOR, 'security', 'BR'),
|
||||
|
||||
// Compute
|
||||
'server': { icon: Server, color: COMPUTE_COLOR },
|
||||
'vm': { icon: Boxes, color: COMPUTE_COLOR },
|
||||
'container': { icon: Package, color: COMPUTE_COLOR },
|
||||
'server': makeConfig(Server, COMPUTE_COLOR, 'compute', 'SRV'),
|
||||
'vm': makeConfig(Boxes, COMPUTE_COLOR, 'compute', 'VM'),
|
||||
'container': makeConfig(Package, COMPUTE_COLOR, 'compute', 'CTR'),
|
||||
|
||||
// Storage
|
||||
'nas': { icon: Database, color: STORAGE_COLOR },
|
||||
'san': { icon: HardDrive, color: STORAGE_COLOR },
|
||||
'cloud-storage': { icon: CloudCog, color: STORAGE_COLOR },
|
||||
'nas': makeConfig(Database, STORAGE_COLOR, 'storage', 'NAS'),
|
||||
'san': makeConfig(HardDrive, STORAGE_COLOR, 'storage', 'SAN'),
|
||||
'cloud-storage': makeConfig(CloudCog, STORAGE_COLOR, 'storage', 'CS'),
|
||||
|
||||
// Cloud / Internet
|
||||
'cloud': { icon: Cloud, color: CLOUD_COLOR },
|
||||
'aws': { icon: Cloud, color: CLOUD_COLOR },
|
||||
'azure': { icon: Cloud, color: CLOUD_COLOR },
|
||||
'gcp': { icon: Cloud, color: CLOUD_COLOR },
|
||||
'isp': { icon: Globe, color: CLOUD_COLOR },
|
||||
'cloud': makeConfig(Cloud, CLOUD_COLOR, 'cloud', 'CLD'),
|
||||
'aws': makeConfig(Cloud, CLOUD_COLOR, 'cloud', 'AWS'),
|
||||
'azure': makeConfig(Cloud, CLOUD_COLOR, 'cloud', 'AZ'),
|
||||
'gcp': makeConfig(Cloud, CLOUD_COLOR, 'cloud', 'GCP'),
|
||||
'isp': makeConfig(Globe, CLOUD_COLOR, 'cloud', 'WAN'),
|
||||
|
||||
// Endpoints
|
||||
'workstation': { icon: Monitor, color: ENDPOINT_COLOR },
|
||||
'laptop': { icon: Laptop, color: ENDPOINT_COLOR },
|
||||
'tablet': { icon: Tablet, color: ENDPOINT_COLOR },
|
||||
'phone': { icon: Smartphone, color: ENDPOINT_COLOR },
|
||||
'printer': { icon: Printer, color: ENDPOINT_COLOR },
|
||||
'workstation': makeConfig(Monitor, ENDPOINT_COLOR, 'endpoint', 'WS'),
|
||||
'laptop': makeConfig(Laptop, ENDPOINT_COLOR, 'endpoint', 'LTP'),
|
||||
'tablet': makeConfig(Tablet, ENDPOINT_COLOR, 'endpoint', 'TAB'),
|
||||
'phone': makeConfig(Smartphone, ENDPOINT_COLOR, 'endpoint', 'PH'),
|
||||
'printer': makeConfig(Printer, ENDPOINT_COLOR, 'endpoint', 'PRN'),
|
||||
|
||||
// Infrastructure / physical
|
||||
'ups': { icon: BatteryCharging, color: INFRA_COLOR },
|
||||
'pdu': { icon: PlugZap, color: INFRA_COLOR },
|
||||
'rack': { icon: RectangleVertical, color: INFRA_COLOR },
|
||||
'patch-panel': { icon: Cable, color: INFRA_COLOR },
|
||||
'camera': { icon: Camera, color: INFRA_COLOR },
|
||||
'nvr': { icon: Video, color: INFRA_COLOR },
|
||||
'iot': { icon: Radio, color: INFRA_COLOR },
|
||||
'ups': makeConfig(BatteryCharging, INFRA_COLOR, 'infrastructure', 'UPS'),
|
||||
'pdu': makeConfig(PlugZap, INFRA_COLOR, 'infrastructure', 'PDU'),
|
||||
'rack': makeConfig(RectangleVertical, INFRA_COLOR, 'infrastructure', 'RCK'),
|
||||
'patch-panel': makeConfig(Cable, INFRA_COLOR, 'infrastructure', 'PP'),
|
||||
'camera': makeConfig(Camera, INFRA_COLOR, 'infrastructure', 'CAM'),
|
||||
'nvr': makeConfig(Video, INFRA_COLOR, 'infrastructure', 'NVR'),
|
||||
'iot': makeConfig(Radio, INFRA_COLOR, 'infrastructure', 'IOT'),
|
||||
}
|
||||
|
||||
const CATEGORY_DEFAULTS: Record<string, DeviceRenderConfig> = {
|
||||
'network': { icon: Router, color: NETWORK_COLOR },
|
||||
'compute': { icon: Server, color: COMPUTE_COLOR },
|
||||
'storage': { icon: Database, color: STORAGE_COLOR },
|
||||
'cloud': { icon: Cloud, color: CLOUD_COLOR },
|
||||
'endpoint': { icon: Monitor, color: ENDPOINT_COLOR },
|
||||
'infrastructure': { icon: PlugZap, color: INFRA_COLOR },
|
||||
'security': { icon: BrickWallFire, color: SECURITY_COLOR },
|
||||
'network': makeConfig(Router, NETWORK_COLOR, 'network', 'NET'),
|
||||
'compute': makeConfig(Server, COMPUTE_COLOR, 'compute', 'CPU'),
|
||||
'storage': makeConfig(Database, STORAGE_COLOR, 'storage', 'DB'),
|
||||
'cloud': makeConfig(Cloud, CLOUD_COLOR, 'cloud', 'CLD'),
|
||||
'endpoint': makeConfig(Monitor, ENDPOINT_COLOR, 'endpoint', 'END'),
|
||||
'infrastructure': makeConfig(PlugZap, INFRA_COLOR, 'infrastructure', 'INF'),
|
||||
'security': makeConfig(BrickWallFire, SECURITY_COLOR, 'security', 'SEC'),
|
||||
}
|
||||
|
||||
const FALLBACK: DeviceRenderConfig = { icon: Cpu, color: INFRA_COLOR }
|
||||
const FALLBACK: DeviceRenderConfig = makeConfig(Cpu, INFRA_COLOR, 'infrastructure', 'DEV')
|
||||
|
||||
export function getDeviceRenderConfig(slug: string, category?: string): DeviceRenderConfig {
|
||||
if (SYSTEM_DEVICE_ICONS[slug]) return SYSTEM_DEVICE_ICONS[slug]
|
||||
|
||||
Reference in New Issue
Block a user