a working product with ugly ui

public/src/components/map/Toolbar.tsx

@@ -0,0 +1,99 @@
+import { useDrawingStore } from '../../stores/drawingStore';
+import type { DrawingTool } from '../../types/mapItem';
+import { CABLE_COLORS, CABLE_LABELS } from '../../types/mapItem';
+
+interface ToolbarProps {
+  mapId: string;
+}
+
+interface ToolButton {
+  id: DrawingTool;
+  label: string;
+  icon: string;
+  color?: string;
+  description: string;
+}
+
+const TOOLS: ToolButton[] = [
+  {
+    id: 'select',
+    label: 'Select',
+    icon: '👆',
+    description: 'Select and edit items',
+  },
+  {
+    id: 'fiber',
+    label: 'Fiber',
+    icon: '━',
+    color: CABLE_COLORS.fiber,
+    description: CABLE_LABELS.fiber,
+  },
+  {
+    id: 'cat6',
+    label: 'Cat6',
+    icon: '━',
+    color: CABLE_COLORS.cat6,
+    description: CABLE_LABELS.cat6,
+  },
+  {
+    id: 'cat6_poe',
+    label: 'Cat6 PoE',
+    icon: '━',
+    color: CABLE_COLORS.cat6_poe,
+    description: CABLE_LABELS.cat6_poe,
+  },
+  {
+    id: 'switch',
+    label: 'Switch',
+    icon: '⚡',
+    description: 'Network Switch',
+  },
+  {
+    id: 'indoor_ap',
+    label: 'Indoor AP',
+    icon: '📡',
+    description: 'Indoor Access Point',
+  },
+  {
+    id: 'outdoor_ap',
+    label: 'Outdoor AP',
+    icon: '📶',
+    description: 'Outdoor Access Point',
+  },
+  {
+    id: 'wireless_mesh',
+    label: 'Wireless',
+    icon: '⚡',
+    color: '#10B981',
+    description: 'Wireless Mesh Link',
+  },
+];
+
+export function Toolbar({ mapId }: ToolbarProps) {
+  const { activeTool, setActiveTool } = useDrawingStore();
+
+  return (
+    <div className="bg-white shadow-lg rounded-lg p-2 space-y-1" style={{ minWidth: '150px' }}>
+      {TOOLS.map((tool) => (
+        <button
+          key={tool.id}
+          onClick={() => setActiveTool(tool.id)}
+          className={`w-full px-3 py-2 rounded text-left flex items-center gap-2 transition-colors ${
+            activeTool === tool.id
+              ? 'bg-blue-100 text-blue-700 font-medium'
+              : 'hover:bg-gray-100 text-gray-700'
+          }`}
+          title={tool.description}
+        >
+          <span
+            className="text-lg"
+            style={tool.color ? { color: tool.color } : undefined}
+          >
+            {tool.icon}
+          </span>
+          <span className="text-sm">{tool.label}</span>
+        </button>
+      ))}
+    </div>
+  );
+}