Add map

3 files changed, 78 insertions, 0 deletions

diff --git a/src/components/widgets/Map.astro b/src/components/widgets/Map.astro
new file mode 100644
index 0000000..dae8253
--- /dev/null
+++ b/src/components/widgets/Map.astro
@@ -0,0 +1,60 @@
+---
+import type { Map as Props } from '~/types';
+import Headline from '~/components/ui/Headline.astro';
+import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
+
+const {
+  title = '',
+  subtitle = '',
+  tagline = '',
+  location = '',
+  height = 400,
+  lat = 53.1234,
+  lon = 18.0123,
+
+  id,
+  isDark = false,
+  classes = {},
+  bg = await Astro.slots.render('bg'),
+} = Astro.props;
+
+// Use provided coordinates or default to Bydgoszcz, Miedzyń
+const coordinates = {
+  lat: lat,
+  lon: lon
+};
+
+// Create map URL with proper coordinates
+const mapUrl = `https://www.openstreetmap.org/export/embed.html?bbox=${coordinates.lon-0.01},${coordinates.lat-0.01},${coordinates.lon+0.01},${coordinates.lat+0.01}&layer=mapnik&marker=${coordinates.lat},${coordinates.lon}`;
+---
+
+<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-7xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
+  <Headline title={title} subtitle={subtitle} tagline={tagline} />
+
+  <div class="mx-auto max-w-7xl p-4 md:px-8">
+    <div class="relative overflow-hidden rounded-lg shadow-xl dark:shadow-none dark:border dark:border-slate-600">
+      <iframe
+        width="100%"
+        height={height}
+        frameborder="0"
+        scrolling="no"
+        marginheight="0"
+        marginwidth="0"
+        src={mapUrl}
+        title="Mapa lokalizacji CustomWorks"
+        class="w-full"
+      >
+      </iframe>
+      <div class="absolute bottom-4 right-4">
+        <a
+          href={`https://www.openstreetmap.org/search?query=${encodeURIComponent(location)}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 px-3 py-2 rounded-md text-sm font-medium shadow-lg hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors duration-200"
+        >
+          Otwórz w OpenStreetMap
+        </a>
+      </div>
+    </div>
+  </div>
+</WidgetWrapper> 
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 7b5ae89..df14280 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -14,6 +14,7 @@ import CallToAction from '~/components/widgets/CallToAction.astro';
 import CallToActionImage from '~/components/widgets/CallToActionImage.astro';
 import Pricing from '~/components/widgets/Pricing.astro';
 import Portfolio from '~/components/widgets/Portfolio.astro';
+import Map from '~/components/widgets/Map.astro';
 
 const metadata = {
   title: 'CustomWorks – Detailing, wrapping, tuning | Profesjonalne usługi pielęgnacji samochodów – Bydgoszcz',
@@ -279,6 +280,16 @@ const metadata = {
     ]}
   />
 
+  <!-- Mapa **************** -->
+
+  <Map
+    title="Lokalizacja"
+    location="Bydgoszcz, Miedzyń"
+    lat={53.13105}
+    lon={17.93132}
+    height={600}
+  />
+
   <!-- Kontakt **************** -->
 
   <Steps2
diff --git a/src/types.d.ts b/src/types.d.ts
index 6d0a0e9..657b477 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -294,4 +294,11 @@ export interface Portfolio extends Omit<Headline, 'classes'>, Widget {
   callToAction?: CallToAction;
 }
 
+export interface Map extends Omit<Headline, 'classes'>, Widget {
+  location?: string;
+  height?: number;
+  lat?: number;
+  lon?: number;
+}
+
 export interface Contact extends Omit<Headline, 'classes'>, Form, Widget {}