Finished styling the Contact component

2025-06-05 17:00:07 +03:30
parent d44aa203e0
commit 7065279807
11 changed files with 296 additions and 118 deletions
@@ -0,0 +1,40 @@
+'use client';
+
+import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+
+delete (L.Icon.Default.prototype as any)._getIconUrl;
+L.Icon.Default.mergeOptions({
+  iconRetinaUrl:
+    'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png',
+  iconUrl:
+    'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
+  shadowUrl:
+    'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
+});
+
+const ContactMap = () => {
+  const position: [number, number] = [35.800081, 51.433882];
+
+  return (
+    <div className="h-[400px] w-full overflow-hidden rounded-lg">
+      <MapContainer
+        center={position}
+        zoom={15}
+        scrollWheelZoom={false}
+        style={{ height: '100%', width: '100%' }}
+      >
+        <TileLayer
+          attribution='&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        />
+        <Marker position={position}>
+          <Popup>lastminute.com London Eye</Popup>
+        </Marker>
+      </MapContainer>
+    </div>
+  );
+};
+
+export default ContactMap;