32 lines
1.7 KiB
TypeScript
32 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
|
|
export function MapEmbed() {
|
|
return (
|
|
<section className="w-full h-[400px] md:h-[500px] bg-slate-200 relative overflow-hidden">
|
|
{/*
|
|
Docelowo tutaj powinien znaleźć się kod iframe z Google Maps.
|
|
Przykład:
|
|
<iframe
|
|
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2505.465597792618!2d17.031980815754593!3d51.10006297957077!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNTHCsDA2JzAwLjIiTiAxN8KwMDInMDMuMCJF!5e0!3m2!1spl!2spl!4v1620000000000!5m2!1spl!2spl"
|
|
width="100%"
|
|
height="100%"
|
|
style={{ border: 0 }}
|
|
allowFullScreen={false}
|
|
loading="lazy"
|
|
referrerPolicy="no-referrer-when-downgrade"
|
|
className="absolute inset-0"
|
|
></iframe>
|
|
*/}
|
|
<div className="absolute inset-0 flex items-center justify-center bg-slate-200 border-y border-border">
|
|
<div className="text-center p-6 bg-white/80 backdrop-blur-sm rounded-xl border border-white/50 shadow-sm max-w-sm mx-4">
|
|
<svg className="w-12 h-12 text-primary/40 mx-auto mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
|
|
</svg>
|
|
<p className="font-semibold text-primary font-heading">Mapa Lokalizacji</p>
|
|
<p className="text-sm text-text-muted mt-1">Tutaj zostanie osadzona interaktywna mapa Google (iframe).</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|