162 lines
6.3 KiB
TypeScript
162 lines
6.3 KiB
TypeScript
import type { LucideIcon } from 'lucide-react'
|
|
import {
|
|
Router, Network, BrickWallFire, Wifi, Server, Monitor, Boxes, Package, Cloud,
|
|
Printer, Smartphone, HardDrive, Gauge, Database, CloudCog,
|
|
Cpu, Tablet, Laptop, BatteryCharging, RectangleVertical,
|
|
Cable, Camera, KeyRound, Globe, Video, PlugZap, Radio,
|
|
} from 'lucide-react'
|
|
|
|
export interface DeviceRenderConfig {
|
|
icon: LucideIcon
|
|
color: string
|
|
accentClass: string
|
|
surfaceClass: string
|
|
category: string
|
|
}
|
|
|
|
// Category-semantic color palette — each color carries meaning:
|
|
// Network (blue) — backbone connectivity layer
|
|
// Security (orange) — critical/protective elements
|
|
// Compute (emerald)— running workloads and VMs
|
|
// Endpoint (amber) — user-facing devices
|
|
// Storage (violet) — data at rest
|
|
// Cloud (cyan) — external/internet-connected
|
|
// Infra (steel) — physical/passive hardware
|
|
export const NETWORK_COLOR = '#60a5fa'
|
|
export const SECURITY_COLOR = '#f87171'
|
|
export const COMPUTE_COLOR = '#34d399'
|
|
export const ENDPOINT_COLOR = '#fbbf24'
|
|
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,
|
|
): DeviceRenderConfig {
|
|
return {
|
|
icon,
|
|
color,
|
|
category,
|
|
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': makeConfig(Router, NETWORK_COLOR, 'network'),
|
|
'switch': makeConfig(Network, NETWORK_COLOR, 'network'),
|
|
'access-point': makeConfig(Wifi, NETWORK_COLOR, 'network'),
|
|
'load-balancer': makeConfig(Gauge, NETWORK_COLOR, 'network'),
|
|
|
|
// Security
|
|
'firewall': makeConfig(BrickWallFire, SECURITY_COLOR, 'security'),
|
|
'badge-reader': makeConfig(KeyRound, SECURITY_COLOR, 'security'),
|
|
|
|
// Compute
|
|
'server': makeConfig(Server, COMPUTE_COLOR, 'compute'),
|
|
'vm': makeConfig(Boxes, COMPUTE_COLOR, 'compute'),
|
|
'container': makeConfig(Package, COMPUTE_COLOR, 'compute'),
|
|
|
|
// Storage
|
|
'nas': makeConfig(Database, STORAGE_COLOR, 'storage'),
|
|
'san': makeConfig(HardDrive, STORAGE_COLOR, 'storage'),
|
|
'cloud-storage': makeConfig(CloudCog, STORAGE_COLOR, 'storage'),
|
|
|
|
// Cloud / Internet
|
|
'cloud': makeConfig(Cloud, CLOUD_COLOR, 'cloud'),
|
|
'aws': makeConfig(Cloud, CLOUD_COLOR, 'cloud'),
|
|
'azure': makeConfig(Cloud, CLOUD_COLOR, 'cloud'),
|
|
'gcp': makeConfig(Cloud, CLOUD_COLOR, 'cloud'),
|
|
'isp': makeConfig(Globe, CLOUD_COLOR, 'cloud'),
|
|
|
|
// Endpoints
|
|
'workstation': makeConfig(Monitor, ENDPOINT_COLOR, 'endpoint'),
|
|
'laptop': makeConfig(Laptop, ENDPOINT_COLOR, 'endpoint'),
|
|
'tablet': makeConfig(Tablet, ENDPOINT_COLOR, 'endpoint'),
|
|
'phone': makeConfig(Smartphone, ENDPOINT_COLOR, 'endpoint'),
|
|
'printer': makeConfig(Printer, ENDPOINT_COLOR, 'endpoint'),
|
|
|
|
// Infrastructure / physical
|
|
'ups': makeConfig(BatteryCharging, INFRA_COLOR, 'infrastructure'),
|
|
'pdu': makeConfig(PlugZap, INFRA_COLOR, 'infrastructure'),
|
|
'rack': makeConfig(RectangleVertical, INFRA_COLOR, 'infrastructure'),
|
|
'patch-panel': makeConfig(Cable, INFRA_COLOR, 'infrastructure'),
|
|
'camera': makeConfig(Camera, INFRA_COLOR, 'infrastructure'),
|
|
'nvr': makeConfig(Video, INFRA_COLOR, 'infrastructure'),
|
|
'iot': makeConfig(Radio, INFRA_COLOR, 'infrastructure'),
|
|
}
|
|
|
|
const CATEGORY_DEFAULTS: Record<string, DeviceRenderConfig> = {
|
|
'network': makeConfig(Router, NETWORK_COLOR, 'network'),
|
|
'compute': makeConfig(Server, COMPUTE_COLOR, 'compute'),
|
|
'storage': makeConfig(Database, STORAGE_COLOR, 'storage'),
|
|
'cloud': makeConfig(Cloud, CLOUD_COLOR, 'cloud'),
|
|
'endpoint': makeConfig(Monitor, ENDPOINT_COLOR, 'endpoint'),
|
|
'infrastructure': makeConfig(PlugZap, INFRA_COLOR, 'infrastructure'),
|
|
'security': makeConfig(BrickWallFire, SECURITY_COLOR, 'security'),
|
|
}
|
|
|
|
const FALLBACK: DeviceRenderConfig = makeConfig(Cpu, INFRA_COLOR, 'infrastructure')
|
|
|
|
export function getDeviceRenderConfig(slug: string, category?: string): DeviceRenderConfig {
|
|
if (SYSTEM_DEVICE_ICONS[slug]) return SYSTEM_DEVICE_ICONS[slug]
|
|
if (category && CATEGORY_DEFAULTS[category]) return CATEGORY_DEFAULTS[category]
|
|
return FALLBACK
|
|
}
|
|
|
|
export const CATEGORY_LABELS: Record<string, string> = {
|
|
'network': 'Network',
|
|
'compute': 'Compute',
|
|
'storage': 'Storage',
|
|
'cloud': 'Cloud',
|
|
'endpoint': 'Endpoints',
|
|
'infrastructure': 'Infrastructure',
|
|
'security': 'Security',
|
|
}
|
|
|
|
export const CATEGORY_COLORS: Record<string, string> = {
|
|
'network': NETWORK_COLOR,
|
|
'compute': COMPUTE_COLOR,
|
|
'storage': STORAGE_COLOR,
|
|
'cloud': CLOUD_COLOR,
|
|
'endpoint': ENDPOINT_COLOR,
|
|
'infrastructure': INFRA_COLOR,
|
|
'security': SECURITY_COLOR,
|
|
}
|
|
|
|
export const CATEGORY_ORDER = ['network', 'compute', 'storage', 'cloud', 'endpoint', 'infrastructure', 'security']
|