diff options
Diffstat (limited to 'src/components/widgets')
| -rw-r--r-- | src/components/widgets/Map.astro | 60 |
1 files changed, 60 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 |