a working product with ugly ui

2025-12-12 20:15:27 +05:00
parent e6d04f986f
commit 4d3085623a
77 changed files with 8750 additions and 0 deletions
--- a/public/src/components/map/LayerSwitcher.tsx
+++ b/public/src/components/map/LayerSwitcher.tsx
@@ -0,0 +1,71 @@
+import { useState } from 'react';
+
+interface LayerInfo {
+  name: string;
+  url: string;
+  attribution: string;
+  maxZoom: number;
+  maxNativeZoom?: number;
+}
+
+interface LayerSwitcherProps {
+  activeLayer: string;
+  onLayerChange: (layer: string) => void;
+  layers: Record<string, LayerInfo>;
+}
+
+export function LayerSwitcher({ activeLayer, onLayerChange, layers }: LayerSwitcherProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="relative">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="bg-white shadow-md rounded-lg px-4 py-2 hover:bg-gray-50 flex items-center gap-2"
+      >
+        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
+        </svg>
+        <span className="text-sm font-medium">
+          {layers[activeLayer]?.name || 'Map Layer'}
+        </span>
+        <svg
+          className={`w-4 h-4 transition-transform ${isOpen ? 'rotate-180' : ''}`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+
+      {isOpen && (
+        <div className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-1">
+          {Object.entries(layers).map(([key, layer]) => (
+            <button
+              key={key}
+              onClick={() => {
+                onLayerChange(key);
+                setIsOpen(false);
+              }}
+              className={`w-full px-4 py-2 text-left text-sm hover:bg-gray-50 flex items-center justify-between ${
+                activeLayer === key ? 'bg-blue-50 text-blue-700' : 'text-gray-700'
+              }`}
+            >
+              <span>{layer.name}</span>
+              {activeLayer === key && (
+                <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                  <path
+                    fillRule="evenodd"
+                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}