main create

2026-06-13 16:06:24 +07:00
parent 3bb7649533
commit 568cb0e0bc
69 changed files with 9551 additions and 0 deletions
@@ -0,0 +1,93 @@
+import React, { useEffect, useState } from 'react';
+import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+import { useTourStore } from './useTourStore';
+import { X, Navigation, Image as ImageIcon } from 'lucide-react';
+
+// Fix lỗi icon mặc định của Leaflet
+const DefaultIcon = L.icon({
+  iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
+  shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+});
+L.Marker.prototype.options.icon = DefaultIcon;
+
+export const ExploreMap = ({ onBack }: { onBack: () => void }) => {
+  const { publicTours, fetchPublicTours } = useTourStore();
+  const [userPos, setUserPos] = useState<[number, number]>([10.7769, 106.7009]); // Mặc định TP.HCM
+
+  useEffect(() => {
+    fetchPublicTours();
+    navigator.geolocation.getCurrentPosition(
+      (pos) => setUserPos([pos.coords.latitude, pos.coords.longitude]),
+      () => console.log("Không thể lấy vị trí người dùng")
+    );
+  }, []);
+
+  return (
+    <div className="h-screen w-full relative">
+      {/* Nút quay lại */}
+      <button 
+        onClick={onBack}
+        className="absolute top-6 left-6 z-[1000] bg-white p-3 rounded-full shadow-xl hover:bg-gray-50 transition-all"
+      >
+        <X className="w-6 h-6 text-gray-800" />
+      </button>
+
+      {/* Header Overlay */}
+      <div className="absolute top-6 left-20 z-[1000] bg-white/90 backdrop-blur-md px-6 py-3 rounded-2xl shadow-xl border border-white/20 hidden sm:block">
+        <div className="flex items-center gap-2">
+          <Navigation className="w-4 h-4 text-blue-600" />
+          <span className="font-bold text-gray-800">Đang khám phá khu vực của bạn</span>
+        </div>
+      </div>
+
+      <MapContainer center={userPos} zoom={13} className="h-full w-full">
+        <TileLayer
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+          attribution='&copy; OpenStreetMap contributors'
+        />
+        
+        {publicTours.map((tour) => {
+          const place = tour.legs?.[0]?.places?.[0];
+          if (!place) return null;
+
+          const tourImage = tour.photos?.[0]?.imageUrl || `https://picsum.photos/seed/${tour.id}/200/200`;
+
+          return (
+            <Marker 
+              key={tour.id} 
+              position={[place.latitude, place.longitude]}
+              icon={L.divIcon({
+                className: 'custom-bubble',
+                html: `
+                  <div class="relative group">
+                    <div class="w-12 h-12 rounded-full border-4 border-white shadow-lg overflow-hidden transition-transform group-hover:scale-110">
+                      <img src="${tourImage}" class="w-full h-full object-cover" />
+                    </div>
+                    <div class="absolute -bottom-1 -right-1 bg-blue-600 rounded-full p-1 border-2 border-white">
+                      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
+                    </div>
+                  </div>
+                `,
+                iconSize: [48, 48],
+              })}
+            >
+              <Popup className="custom-popup">
+                <div className="p-1 max-w-[200px]">
+                  <img src={tourImage} className="w-full h-32 object-cover rounded-lg mb-2" />
+                  <h4 className="font-bold text-gray-900 leading-tight mb-1">{tour.title}</h4>
+                  <button className="text-xs font-bold text-blue-600 flex items-center gap-1">
+                    Xem chi tiết hình ảnh <ImageIcon className="w-3 h-3" />
+                  </button>
+                </div>
+              </Popup>
+            </Marker>
+          );
+        })}
+      </MapContainer>
+    </div>
+  );
+};