58 lines
2.2 KiB
TypeScript
58 lines
2.2 KiB
TypeScript
|
/**
|
||
|
|
* DevicePalette — sidebar showing all available device types.
|
||
|
|
*
|
||
|
|
* SCAFFOLD: Currently a static visual list. Full drag-to-rack DnD requires
|
||
|
|
* @dnd-kit integration with the RackColumn drop targets (see roadmap).
|
||
|
|
*/
|
||
|
|
import type { ModuleType } from '../../types';
|
||
|
|
import { MODULE_TYPE_LABELS, MODULE_TYPE_COLORS, MODULE_U_DEFAULTS, MODULE_PORT_DEFAULTS } from '../../lib/constants';
|
||
|
|
import { cn } from '../../lib/utils';
|
||
|
|
|
||
|
|
const ALL_TYPES: ModuleType[] = [
|
||
|
|
'SWITCH', 'AGGREGATE_SWITCH', 'ROUTER', 'FIREWALL', 'PATCH_PANEL',
|
||
|
|
'MODEM', 'SERVER', 'NAS', 'PDU', 'AP', 'BLANK', 'OTHER',
|
||
|
|
];
|
||
|
|
|
||
|
|
interface DevicePaletteProps {
|
||
|
|
/** Called when user clicks a device type to place it. */
|
||
|
|
onSelect?: (type: ModuleType) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function DevicePalette({ onSelect }: DevicePaletteProps) {
|
||
|
|
return (
|
||
|
|
<aside className="w-44 shrink-0 flex flex-col bg-slate-800 border-r border-slate-700 overflow-y-auto">
|
||
|
|
<div className="px-3 py-2 border-b border-slate-700">
|
||
|
|
<p className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Devices</p>
|
||
|
|
<p className="text-[10px] text-slate-600 mt-0.5">Click a slot, then choose type</p>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col gap-1 p-2">
|
||
|
|
{ALL_TYPES.map((type) => {
|
||
|
|
const colors = MODULE_TYPE_COLORS[type];
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
key={type}
|
||
|
|
onClick={() => onSelect?.(type)}
|
||
|
|
className={cn(
|
||
|
|
'flex items-center gap-2 px-2 py-1.5 rounded border text-left w-full hover:brightness-125 transition-all',
|
||
|
|
colors.bg,
|
||
|
|
colors.border
|
||
|
|
)}
|
||
|
|
aria-label={`Add ${MODULE_TYPE_LABELS[type]}`}
|
||
|
|
>
|
||
|
|
<div className={cn('w-2 h-2 rounded-sm shrink-0', colors.bg, 'brightness-150')} />
|
||
|
|
<div className="min-w-0 flex-1">
|
||
|
|
<div className="text-xs font-medium text-white truncate">
|
||
|
|
{MODULE_TYPE_LABELS[type]}
|
||
|
|
</div>
|
||
|
|
<div className="text-[10px] text-slate-400">
|
||
|
|
{MODULE_U_DEFAULTS[type]}U · {MODULE_PORT_DEFAULTS[type]} ports
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
);
|
||
|
|
}
|