Last night

frontend/src/components/map/MobileDrawer.tsx

@@ -0,0 +1,59 @@
+import { useState, useEffect } from 'react';
+import { CloseIcon } from '../ui/icons/CloseIcon';
+import { TabButton } from '../ui/TabButton';
+
+type DrawerTab = 'area' | 'properties' | 'pois';
+
+interface MobileDrawerProps {
+  onClose: () => void;
+  renderArea: () => React.ReactNode;
+  renderProperties: () => React.ReactNode;
+  renderPOIs: () => React.ReactNode;
+}
+
+export default function MobileDrawer({
+  onClose,
+  renderArea,
+  renderProperties,
+  renderPOIs,
+}: MobileDrawerProps) {
+  const [tab, setTab] = useState<DrawerTab>('area');
+
+  // Close on Escape
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [onClose]);
+
+  return (
+    <div className="fixed inset-0 z-50 flex flex-col">
+      {/* Backdrop — top 10% */}
+      <div className="h-[10%] bg-black/50" onClick={onClose} />
+
+      {/* Panel — bottom 90% */}
+      <div className="h-[90%] bg-white dark:bg-navy-950 rounded-t-2xl flex flex-col shadow-xl overflow-hidden">
+        {/* Tab bar + close */}
+        <div className="flex border-b border-warm-200 dark:border-navy-700 text-sm shrink-0">
+          <TabButton label="Area" isActive={tab === 'area'} onClick={() => setTab('area')} />
+          <TabButton label="Properties" isActive={tab === 'properties'} onClick={() => setTab('properties')} />
+          <TabButton label="POIs" isActive={tab === 'pois'} onClick={() => setTab('pois')} />
+          <button
+            onClick={onClose}
+            className="ml-auto flex items-center justify-center w-10 h-10 rounded-lg hover:bg-warm-100 dark:hover:bg-navy-800"
+            aria-label="Close drawer"
+          >
+            <CloseIcon className="w-5 h-5 text-warm-500 dark:text-warm-400" />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-hidden">
+          {tab === 'area' ? renderArea() : tab === 'properties' ? renderProperties() : renderPOIs()}
+        </div>
+      </div>
+    </div>
+  );
+}