From 1772ced959dc6714b83124ab66a7491f6c3f4f2d Mon Sep 17 00:00:00 2001
From: 3dtours <yeunhiepanh.photo@gmail.com>
Date: Tue, 16 Jun 2026 15:35:45 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20n=C3=BAt=20l=E1=BB=8Dc=20filter=20tags?=
 =?UTF-8?q?=20dropdown?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/ExploreMap.tsx | 66 +++++++++++++++++++------------
 1 file changed, 41 insertions(+), 25 deletions(-)

diff --git a/frontend/src/pages/ExploreMap.tsx b/frontend/src/pages/ExploreMap.tsx
index 4e1208e..2502d56 100644
--- a/frontend/src/pages/ExploreMap.tsx
+++ b/frontend/src/pages/ExploreMap.tsx
@@ -78,6 +78,7 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour }: { onBack: ()
   const [mapZoom] = useState(initialViewState?.zoom || 13);
   const [isAdminModalOpen, setIsAdminModalOpen] = useState(false);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const [isFilterDropdownOpen, setIsFilterDropdownOpen] = useState(false); // State để điều khiển hiển thị dropdown lọc
   const [searchQuery, setSearchQuery] = useState(''); // State cho giá trị tìm kiếm
   const [suggestions, setSuggestions] = useState<{ type: 'tour' | 'location', id: string, name: string, lat?: number, lon?: number }[]>([]);
   const [isSearchingSuggestions, setIsSearchingSuggestions] = useState(false);
@@ -228,6 +229,44 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour }: { onBack: ()
             <X className="w-6 h-6 text-gray-800" />
           </button>
 
+          {/* Nút lọc Tag và Dropdown */}
+          <div className="relative">
+            <button
+              onClick={() => setIsFilterDropdownOpen(prev => !prev)}
+              className="bg-white p-3 rounded-full shadow-xl hover:bg-gray-50 transition-all border border-gray-100 flex items-center justify-center"
+              title="Lọc theo loại"
+            >
+              <Filter className="w-6 h-6 text-gray-800" />
+            </button>
+
+            {/* Filter Dropdown Content */}
+            {isFilterDropdownOpen && (
+              <div className="absolute top-full left-0 mt-3 bg-white/90 backdrop-blur-md p-2 rounded-2xl shadow-xl border border-white/20 flex flex-col gap-2 max-w-[200px] z-[1003] animate-in slide-in-from-left-2 duration-200">
+                <div className="flex items-center gap-2 px-2 py-1 border-b border-gray-100 mb-1">
+                  <Filter className="w-3.5 h-3.5 text-blue-600" />
+                  <span className="text-[11px] font-black uppercase text-gray-500 tracking-wider">Lọc theo loại</span>
+                </div>
+                <div className="flex flex-col gap-1.5"> {/* Hiển thị tag theo chiều dọc */}
+                  <button
+                    onClick={() => { setSelectedFilterTag(null); setIsFilterDropdownOpen(false); }}
+                    className={`px-2.5 py-1 rounded-lg text-[10px] font-bold transition-all ${!selectedFilterTag ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-500 hover:bg-gray-200'}`}
+                  >
+                    Tất cả
+                  </button>
+                  {allFilterTags.map(tag => (
+                    <button
+                      key={tag}
+                      onClick={() => { setSelectedFilterTag(tag === selectedFilterTag ? null : tag); setIsFilterDropdownOpen(false); }}
+                      className={`px-2.5 py-1 rounded-lg text-[10px] font-bold transition-all ${selectedFilterTag === tag ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-500 hover:bg-gray-200'}`}
+                    >
+                      {tag}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+
           {/* Search Box - Thay thế div "Khám phá khu vực" */}
           <div className="relative flex items-center bg-white/90 backdrop-blur-md rounded-2xl shadow-xl border border-white/20 flex-1 max-w-xs sm:max-w-md pointer-events-auto hidden sm:flex px-4 py-3">
             <Navigation className="w-4 h-4 text-blue-600 mr-2 flex-shrink-0" />
@@ -310,28 +349,6 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour }: { onBack: ()
         </div>
       </div>
 
-      {/* Ribbon lọc theo Tag - Đặt ngay dưới top-bar, có thể cuộn ngang */}
-      <div className="absolute top-[72px] left-0 right-0 z-[1001] px-4 py-2 bg-white/90 backdrop-blur-md shadow-md border-b border-gray-100 pointer-events-none">
-        <div className="flex items-center gap-2 overflow-x-auto whitespace-nowrap scrollbar-hide pointer-events-auto">
-          <Filter className="w-4 h-4 text-gray-500 flex-shrink-0" />
-          <button
-            onClick={() => setSelectedFilterTag(null)}
-            className={`px-3 py-1.5 rounded-full text-xs font-bold transition-all flex-shrink-0 ${!selectedFilterTag ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}
-          >
-            Tất cả
-          </button>
-          {allFilterTags.map(tag => (
-            <button
-              key={tag}
-              onClick={() => setSelectedFilterTag(tag === selectedFilterTag ? null : tag)}
-              className={`px-3 py-1.5 rounded-full text-xs font-bold transition-all flex-shrink-0 ${selectedFilterTag === tag ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}
-            >
-              {tag}
-            </button>
-          ))}
-        </div>
-      </div>
-
       <MapContainer 
         center={userPos} 
         zoom={mapZoom} 
@@ -345,9 +362,8 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour }: { onBack: ()
         
         {/* Theo dõi di chuyển bản đồ */}
         <MapTracker />
-
-        {/* Đóng menu khi tương tác bản đồ */}
-        <MapEvents onMapAction={() => { setShareMenu(null); setSuggestions([]); }} />
+        {/* Đóng menu và dropdown khi tương tác bản đồ */}
+        <MapEvents onMapAction={() => { setShareMenu(null); setSuggestions([]); setIsFilterDropdownOpen(false); }} />
 
         {/* Tự động di chuyển bản đồ đến vị trí người dùng khi tìm thấy tọa độ */}
         <RecenterMap position={userPos} />