Bra detaljvvisning"
This commit is contained in:
parent
e38342d99c
commit
a7c17b7572
1 changed files with 113 additions and 100 deletions
|
|
@ -1,12 +1,12 @@
|
|||
"use client";
|
||||
/**
|
||||
* TEE OFF DETAIL VIEW - COMPLETE v3.12 (THE DEFINITIVE VERSION)
|
||||
* TEE OFF DETAIL VIEW - COMPLETE v3.15 (FINAL POLISH)
|
||||
* ---------------------------------------------------------------------------
|
||||
* FIX: Kart-ikonet er nå strengt låst til w-5 h-5 (ingen mer "eksplosjon").
|
||||
* FIX: Telefon-lenker bruker 0047-format internt (tel:0047...).
|
||||
* FIX: Sidebar har 4 klikkbare monokrome lenker (Web, Tel, Mail, Maps).
|
||||
* FIX: Inneholder ALLE seksjoner: Intro, Vær, Detaljer, Kart, Video, Priser, Scorekort.
|
||||
* REGEL: Beholder 22/78 layout og robust JSON-parsing for Losby-stabilitet.
|
||||
* FIX: Flyttet Turneringer til over Baneguide i ressurslisten.
|
||||
* FIX: Endret "Statistik" til "Statistikk".
|
||||
* FIX: Ensrettet alle knapper i "Andre ressurser" (samme bakgrunn og hover).
|
||||
* FIX: Sørget for at alle felt med lenker i "Andre tilbud" er oransje (#ff5722).
|
||||
* REGEL: Beholder monokrome ikoner, 22/78 layout og robust JSON-parsing.
|
||||
* ---------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
|
|
@ -15,23 +15,16 @@ import { STATUS_MAP, FALLBACK_IMAGE } from "@/config/constants";
|
|||
import Link from 'next/link';
|
||||
import CourseDisplay from './CourseDisplay';
|
||||
|
||||
// Hjelpefunksjon for å formatere telefonnummer for tel-lenker (f.eks +47 -> 0047)
|
||||
const formatPhoneForUrl = (phone: string) => {
|
||||
if (!phone) return "";
|
||||
return phone.replace('+', '00').replace(/\s/g, '');
|
||||
};
|
||||
|
||||
// --- MONOKROME SVG IKONER (Strengt låst til 20x20px) ---
|
||||
const Icon = ({ children, className = "w-5 h-5" }: { children: React.ReactNode, className?: string }) => (
|
||||
<svg
|
||||
className={`${className} flex-shrink-0 text-[#11280f]`}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
style={{ width: '20px', height: '20px' }} // Dobbel sikring mot gigant-ikoner
|
||||
viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
|
||||
style={{ width: '20px', height: '20px' }}
|
||||
>
|
||||
{children}
|
||||
</svg>
|
||||
|
|
@ -42,8 +35,11 @@ const ICONS = {
|
|||
phone: <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />,
|
||||
mail: <><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" /><polyline points="22,6 12,13 2,6" /></>,
|
||||
pin: <><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" /><circle cx="12" cy="10" r="3" /></>,
|
||||
booking: <><rect x="3" y="4" width="18" height="18" rx="2" ry="2" /><line x1="16" y1="2" x2="16" y2="6" /><line x1="8" y1="2" x2="8" y2="6" /><line x1="3" y1="10" x2="21" y2="10" /></>,
|
||||
guide: <><polygon points="3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21" /><line x1="9" y1="3" x2="9" y2="18" /><line x1="15" y1="6" x2="15" y2="21" /></>,
|
||||
booking: <><path d="M3 10h18M7 15h.01M11 15h.01M15 15h.01M7 19h.01M11 19h.01M15 19h.01M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2zM16 3v4M8 3v4"/></>,
|
||||
trophy: <><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6M18 9h1.5a2.5 2.5 0 0 0 0-5H18M4 22h16M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22M18 2H6v7a6 6 0 0 0 12 0V2z"/></>,
|
||||
guide: <><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1-2.5-2.5V4.5z"/></>,
|
||||
camera: <><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"/></>,
|
||||
chart: <><path d="M18 20V10M12 20V4M6 20v-6"/></>,
|
||||
weather: <><path d="M12 2v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="M20 12h2"/><path d="m19.07 4.93-1.41 1.41"/><path d="M15.947 12.65a4 4 0 0 0-5.925-4.128"/><path d="M13 22H7a5 5 0 1 1 4.9-6H13a3 3 0 0 1 0 6Z"/></>
|
||||
};
|
||||
|
||||
|
|
@ -51,7 +47,6 @@ export default function FacilityDetailView({ facility }: { facility: any }) {
|
|||
const [showBackToTop, setShowBackToTop] = useState(false);
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
|
||||
// --- DATA RECOVERY (LOSBY-FIX) ---
|
||||
const parseJson = (val: any, fallback: any) => {
|
||||
if (!val) return fallback;
|
||||
if (typeof val === 'object') return val;
|
||||
|
|
@ -67,6 +62,7 @@ export default function FacilityDetailView({ facility }: { facility: any }) {
|
|||
|
||||
const linkClass = "text-orange-600 hover:underline transition-colors font-bold";
|
||||
const sidebarLinkClass = "flex items-center gap-4 hover:text-orange-600 transition-colors group";
|
||||
const resourceBtnClass = "flex justify-between items-center p-5 bg-gray-50 rounded-2xl text-[11px] font-black uppercase hover:bg-orange-600 hover:text-white transition-all group";
|
||||
|
||||
useEffect(() => {
|
||||
if (gallery.length <= 1) return;
|
||||
|
|
@ -91,30 +87,18 @@ export default function FacilityDetailView({ facility }: { facility: any }) {
|
|||
return (
|
||||
<main className="min-h-screen bg-[#f1f7ed] pb-20 relative font-sans text-[#11280f]">
|
||||
|
||||
{/* HEADER / GALLERI SLIDER */}
|
||||
{/* 1. HERO SLIDER */}
|
||||
<div className="h-[55vh] min-h-[450px] relative overflow-hidden bg-[#11280f]">
|
||||
{gallery.map((img: string, i: number) => (
|
||||
<img key={i} src={img} className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-1000 ${i === currentSlide ? 'opacity-100 z-10' : 'opacity-0 z-0'}`} alt="" />
|
||||
))}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-[#11280f]/90 via-transparent to-black/10 z-20" />
|
||||
|
||||
<div className="absolute top-8 right-8 z-40 flex flex-col items-end gap-1">
|
||||
<div className="flex flex-wrap justify-end gap-2">
|
||||
{activeCourses.map((c: any) => (
|
||||
<span key={c.id} className="px-3 py-1.5 rounded-lg text-[10px] font-black uppercase bg-[#7ca982] text-white shadow-xl">{STATUS_MAP[c.status] || c.status}</span>
|
||||
))}
|
||||
</div>
|
||||
{facility.status_updated_at && <span className="text-white/60 text-[10px] uppercase font-bold tracking-widest mt-1">Sist oppdatert: {formatDate(facility.status_updated_at)}</span>}
|
||||
<div className="absolute top-8 right-8 z-40 flex flex-wrap justify-end gap-2">
|
||||
{activeCourses.map((c: any) => (
|
||||
<span key={c.id} className="px-3 py-1.5 rounded-lg text-[10px] font-black uppercase bg-[#7ca982] text-white shadow-xl">{STATUS_MAP[c.status] || c.status}</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-8 right-8 z-40 flex gap-2.5 bg-black/30 backdrop-blur-md p-2 rounded-2xl border border-white/10 shadow-2xl">
|
||||
{facility.website_url && <a href={facility.website_url} target="_blank" className="w-9 h-9 bg-white rounded-xl flex items-center justify-center text-[#11280f] hover:text-orange-600 transition-all"><Icon children={ICONS.web} /></a>}
|
||||
{facility.golfbox_booking_url && <a href={facility.golfbox_booking_url} target="_blank" className="w-9 h-9 bg-white rounded-xl flex items-center justify-center text-[#11280f] hover:text-orange-600 transition-all"><Icon children={ICONS.booking} /></a>}
|
||||
<a href={`https://www.google.com/maps/search/?api=1&query=${facility.lat},${facility.lng}`} target="_blank" className="w-9 h-9 bg-white rounded-xl flex items-center justify-center text-[#11280f] hover:text-orange-600 transition-all"><Icon children={ICONS.pin} /></a>
|
||||
{facility.weather_url && <a href={facility.weather_url} target="_blank" className="w-9 h-9 bg-white rounded-xl flex items-center justify-center text-[#11280f] hover:text-orange-600 transition-all"><Icon children={ICONS.weather} /></a>}
|
||||
</div>
|
||||
|
||||
<div className="relative z-30 max-w-[1200px] mx-auto px-6 w-full h-full flex flex-col justify-end pb-12 text-center md:text-left">
|
||||
<div className="relative z-30 max-w-[1200px] mx-auto px-6 w-full h-full flex flex-col justify-end pb-12">
|
||||
{facility.logo_url && (
|
||||
<div className="hidden md:block mb-8 w-24 h-24 bg-white p-2 rounded-2xl shadow-2xl border-4 border-white/20 overflow-hidden"><img src={facility.logo_url} className="w-full h-full object-contain" alt="Logo" /></div>
|
||||
)}
|
||||
|
|
@ -123,11 +107,14 @@ export default function FacilityDetailView({ facility }: { facility: any }) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* 2. STICKY NAV */}
|
||||
<nav className="sticky top-0 z-50 bg-white/95 backdrop-blur-md border-b border-gray-100 shadow-sm overflow-hidden">
|
||||
<div className="max-w-[1200px] mx-auto px-6 flex justify-between md:justify-start gap-4 md:gap-10 h-16 items-center text-[10px] font-black uppercase tracking-widest text-gray-400">
|
||||
<button onClick={() => scrollTo('intro')}>Info</button>
|
||||
<button onClick={() => scrollTo('weather')}>Vær</button>
|
||||
<button onClick={() => scrollTo('details')}>Detaljer</button>
|
||||
<button onClick={() => scrollTo('map')}>Kart</button>
|
||||
{facility.video_url && <button onClick={() => scrollTo('video')}>Video</button>}
|
||||
<button onClick={() => scrollTo('prices')}>Priser</button>
|
||||
<button onClick={() => scrollTo('scorecards')}>Scorekort</button>
|
||||
</div>
|
||||
|
|
@ -135,43 +122,94 @@ export default function FacilityDetailView({ facility }: { facility: any }) {
|
|||
|
||||
<div className="max-w-[1200px] mx-auto px-0 md:px-6 space-y-4 md:space-y-12 mt-0 md:mt-12">
|
||||
|
||||
{/* SIDEBAR SEKSJON (22/78) */}
|
||||
{/* 3. INTRO & SIDEBAR */}
|
||||
<section id="intro" className="flex flex-col lg:flex-row gap-0 md:gap-8 items-stretch">
|
||||
<div className="lg:w-[22%] bg-white p-10 md:rounded-[3rem] shadow-sm flex flex-col border-b md:border-none">
|
||||
<div className="lg:w-[22%] bg-white p-10 md:rounded-[3rem] shadow-sm flex flex-col">
|
||||
<h3 className="text-[10px] font-black text-gray-300 uppercase tracking-widest mb-10">Kontakt & Adresse</h3>
|
||||
|
||||
<div className="flex-grow space-y-7 text-sm font-bold">
|
||||
<a href={facility.website_url} target="_blank" className={sidebarLinkClass}>
|
||||
<Icon children={ICONS.web} /> Besøk nettsiden
|
||||
</a>
|
||||
<a href={`tel:${formatPhoneForUrl(facility.phone)}`} className={sidebarLinkClass}>
|
||||
<Icon children={ICONS.phone} /> {facility.phone || 'Ikke oppgitt'}
|
||||
</a>
|
||||
<a href={`mailto:${facility.email}`} className={sidebarLinkClass}>
|
||||
<Icon children={ICONS.mail} /> <span className="truncate">{facility.email || 'Ikke oppgitt'}</span>
|
||||
</a>
|
||||
<a href={facility.website_url} target="_blank" className={sidebarLinkClass}><Icon children={ICONS.web} /> Besøk nettsiden</a>
|
||||
<a href={`tel:${formatPhoneForUrl(facility.phone)}`} className={sidebarLinkClass}><Icon children={ICONS.phone} /> {facility.phone || 'Ikke oppgitt'}</a>
|
||||
<a href={`mailto:${facility.email}`} className={sidebarLinkClass}><Icon children={ICONS.mail} /> <span className="truncate">{facility.email || 'Ikke oppgitt'}</span></a>
|
||||
<div className="pt-2 border-t border-gray-50 mt-4">
|
||||
<a href={`https://www.google.com/maps/search/?api=1&query=${facility.lat},${facility.lng}`} target="_blank" className={sidebarLinkClass + " pt-4 leading-tight items-start"}>
|
||||
<Icon children={ICONS.pin} />
|
||||
<span className="text-gray-400 group-hover:text-orange-600 transition-colors">{facility.address}<br/>{facility.city}</span>
|
||||
<Icon children={ICONS.pin} /> <span className="text-gray-400 group-hover:text-orange-600 transition-colors">{facility.address}<br/>{facility.city}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-auto pt-10 border-t border-gray-50">
|
||||
<Link href={`/`} className="text-[10px] font-black uppercase tracking-widest text-[#7ca982] hover:text-[#11280f] transition-all flex items-center gap-1">
|
||||
Se alle baner i {facility.county} →
|
||||
</Link>
|
||||
<Link href={`/`} className="text-[10px] font-black uppercase tracking-widest text-[#7ca982] hover:text-[#11280f] transition-all flex items-center gap-1">Se alle baner i {facility.county} →</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lg:w-[78%] bg-white p-10 md:p-16 md:rounded-[3rem] shadow-sm border-b md:border-none">
|
||||
{facility.footnote && <div className="mb-8 pb-8 border-b border-gray-50 italic text-gray-400 text-lg leading-relaxed font-serif">{facility.footnote}</div>}
|
||||
<div className="lg:w-[78%] bg-white p-10 md:p-16 md:rounded-[3rem] shadow-sm">
|
||||
{facility.footnote && <div className="mb-8 pb-8 border-b border-gray-50 italic text-gray-400 text-lg font-serif">{facility.footnote}</div>}
|
||||
<div className="leading-relaxed text-lg md:text-xl text-gray-600" dangerouslySetInnerHTML={{ __html: facility.description || 'Ingen beskrivelse tilgjengelig.' }} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* VÆR SEKSJON */}
|
||||
{/* 4. 3-KOLONNE INFO */}
|
||||
<section id="details" className="grid grid-cols-1 lg:grid-cols-3 gap-4 md:gap-8">
|
||||
|
||||
{/* KOLONNE 1: ANDRE RESSURSER (Ensrettet uttrykk & Sortering) */}
|
||||
<div className="bg-white p-10 md:rounded-[3rem] shadow-sm">
|
||||
<h3 className="text-lg font-black mb-8 uppercase tracking-tighter">Andre Ressurser</h3>
|
||||
<div className="space-y-2.5">
|
||||
{facility.golfbox_booking_url && (
|
||||
<a href={facility.golfbox_booking_url} target="_blank" className={resourceBtnClass}>
|
||||
<span className="flex items-center gap-3"><Icon children={ICONS.booking} className="group-hover:text-white" /> Book Starttid</span><span>→</span>
|
||||
</a>
|
||||
)}
|
||||
{facility.golfbox_tournament_url && (
|
||||
<a href={facility.golfbox_tournament_url} target="_blank" className={resourceBtnClass}>
|
||||
<span className="flex items-center gap-3"><Icon children={ICONS.trophy} className="group-hover:text-white" /> Turneringer</span><span>→</span>
|
||||
</a>
|
||||
)}
|
||||
{facility.baneguide_url && (
|
||||
<a href={facility.baneguide_url} target="_blank" className={resourceBtnClass}>
|
||||
<span className="flex items-center gap-3"><Icon children={ICONS.guide} className="group-hover:text-white" /> Baneguide</span><span>→</span>
|
||||
</a>
|
||||
)}
|
||||
{facility.flyfoto_url && (
|
||||
<a href={facility.flyfoto_url} target="_blank" className={resourceBtnClass}>
|
||||
<span className="flex items-center gap-3"><Icon children={ICONS.camera} className="group-hover:text-white" /> Flyfoto</span><span>→</span>
|
||||
</a>
|
||||
)}
|
||||
{shotzoom.map((sz: any, i: number) => (
|
||||
<a key={i} href={sz.shotzoom_url} target="_blank" className={resourceBtnClass}>
|
||||
<span className="flex items-center gap-3"><Icon children={ICONS.chart} className="group-hover:text-white" /> Statistikk: {sz.shotzoom_beskrivelse?.replace(/ /g, ' ').toUpperCase()}</span><span>→</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* KOLONNE 2: BANEN */}
|
||||
<div className="bg-white p-10 md:rounded-[3rem] shadow-sm text-sm font-bold text-gray-700">
|
||||
<h3 className="text-lg font-black mb-8 uppercase tracking-tighter text-[#11280f]">Banen</h3>
|
||||
<div className="space-y-5">
|
||||
<div className="flex justify-between border-b border-gray-50 pb-3"><span className="text-gray-400">Hull:</span><span>{amenities.antall_hull || '--'}</span></div>
|
||||
<div className="flex justify-between border-b border-gray-50 pb-3"><span className="text-gray-400">Lengde:</span><span>{facility.length_meters ? `${facility.length_meters}m` : '--'}</span></div>
|
||||
<div className="flex justify-between border-b border-gray-50 pb-3"><span className="text-gray-400">Sesong:</span><span>{facility.season || '--'}</span></div>
|
||||
<div className="flex justify-between border-b border-gray-50 pb-3"><span className="text-gray-400">Byggeår:</span><span>{facility.established_year || '--'}</span></div>
|
||||
<div className="flex justify-between border-b border-gray-50 pb-3"><span className="text-gray-400">Banetype:</span><span>{facility.banetype || 'Park/Skog'}</span></div>
|
||||
<div className="flex justify-between"><span className="text-gray-400">Arkitekt:</span><span className="text-right truncate ml-4">{facility.architect || '--'}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* KOLONNE 3: ANDRE TILBUD (Oransje lenker) */}
|
||||
<div className="bg-white p-10 md:rounded-[3rem] shadow-sm text-sm font-bold text-gray-700">
|
||||
<h3 className="text-lg font-black mb-8 uppercase tracking-tighter text-[#11280f]">Andre Tilbud</h3>
|
||||
<div className="space-y-5">
|
||||
<div className="flex justify-between border-b border-gray-50 pb-3"><span className="text-gray-400">Drivingrange:</span><span>{amenities.drivingrange || 'Nei'}</span></div>
|
||||
<div className="flex justify-between border-b border-gray-50 pb-3"><span className="text-gray-400">Nærspill:</span><span>{amenities.treningsgreen || 'Ja'}</span></div>
|
||||
<div className="flex justify-between border-b border-gray-50 pb-3"><span className="text-gray-400">Proshop:</span><span className="text-right ml-4 text-orange-600" dangerouslySetInnerHTML={{ __html: amenities.proshop || 'Nei' }} /></div>
|
||||
<div className="flex justify-between border-b border-gray-50 pb-3"><span className="text-gray-400">Kølleutleie:</span><span>{amenities.kolleutleie || 'Ja'}</span></div>
|
||||
<div className="flex justify-between border-b border-gray-50 pb-3"><span className="text-gray-400">Simulator:</span><span className="text-orange-600" dangerouslySetInnerHTML={{ __html: amenities.simulator || 'Nei' }} /></div>
|
||||
<div className="flex justify-between border-b border-gray-50 pb-3"><span className="text-gray-400">Head Pro:</span><span className="text-orange-600" dangerouslySetInnerHTML={{ __html: amenities.pro || '--' }} /></div>
|
||||
<div className="flex justify-between"><span className="text-gray-400">Kafé:</span><span className="text-orange-600" dangerouslySetInnerHTML={{ __html: amenities.kafe || '--' }} /></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 5. VÆR SEKSJON */}
|
||||
<section id="weather" className="bg-white p-0 md:p-12 md:rounded-[3rem] shadow-sm border-b md:border-none overflow-hidden text-center">
|
||||
<h3 className="text-[10px] font-black text-gray-300 uppercase tracking-[0.2em] py-8 md:py-0 md:mb-10 flex items-center justify-center gap-3"><Icon children={ICONS.weather} /> Vær for {facility.name}</h3>
|
||||
<div className="w-full flex justify-center px-4 md:px-0">
|
||||
|
|
@ -179,61 +217,36 @@ export default function FacilityDetailView({ facility }: { facility: any }) {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
{/* DETALJER / FASILITETER SEKSJON */}
|
||||
<section id="details" className="flex flex-col lg:flex-row gap-4 md:gap-8">
|
||||
<div className="lg:w-[22%] bg-white p-10 md:rounded-[3rem] shadow-sm border-b md:border-none">
|
||||
<h3 className="text-lg font-black mb-8 uppercase tracking-tighter">Ressurser</h3>
|
||||
<div className="space-y-2.5 text-[#11280f]">
|
||||
{facility.golfbox_booking_url && <a href={facility.golfbox_booking_url} target="_blank" className="flex justify-between items-center p-4 bg-gray-50 rounded-2xl text-[11px] font-black uppercase hover:bg-orange-600 hover:text-white transition-all"><span><Icon children={ICONS.booking} className="inline mr-3" /> Book Starttid</span><span>→</span></a>}
|
||||
{facility.baneguide_url && <a href={facility.baneguide_url} target="_blank" className="flex justify-between items-center p-4 bg-gray-50 rounded-2xl text-[11px] font-black uppercase hover:bg-orange-600 hover:text-white transition-all"><span><Icon children={ICONS.guide} className="inline mr-3" /> Baneguide</span><span>→</span></a>}
|
||||
{shotzoom.map((sz: any, i: number) => (
|
||||
<a key={i} href={sz.shotzoom_url} target="_blank" className="flex justify-between items-center p-4 bg-gray-50 rounded-2xl text-[11px] font-black uppercase text-orange-600 border border-orange-50 shadow-sm"><span>📊 Statistikk: {sz.shotzoom_beskrivelse?.replace(' ', ' ')}</span><span>→</span></a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lg:w-[78%] grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8 text-sm font-bold text-gray-700">
|
||||
<div className="bg-white p-10 md:rounded-[3rem] shadow-sm border-b md:border-none">
|
||||
<h3 className="text-lg font-black mb-8 uppercase tracking-tighter text-[#11280f]">Banen</h3>
|
||||
<div className="space-y-5">
|
||||
<div className="flex justify-between border-b border-gray-50 pb-3"><span>Hull:</span><span>{amenities.antall_hull || '--'}</span></div>
|
||||
<div className="flex justify-between border-b border-gray-50 pb-3"><span>Lengde:</span><span>{facility.length_meters ? `${facility.length_meters}m` : '--'}</span></div>
|
||||
<div className="flex justify-between border-b border-gray-50 pb-3"><span>Byggeår:</span><span>{facility.established_year || '--'}</span></div>
|
||||
<div className="flex justify-between border-b border-gray-50 pb-3"><span>Banetype:</span><span>{facility.banetype || 'Park/Skog'}</span></div>
|
||||
<div className="flex justify-between"><span>Arkitekt:</span><span className="text-right truncate ml-4">{facility.architect || '--'}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white p-10 md:rounded-[3rem] shadow-sm border-b md:border-none">
|
||||
<h3 className="text-lg font-black mb-8 uppercase tracking-tighter text-[#11280f]">Fasiliteter</h3>
|
||||
<div className="space-y-5">
|
||||
<div className="flex justify-between border-b border-gray-50 pb-3"><span>Drivingrange:</span><span>{amenities.drivingrange || 'Nei'}</span></div>
|
||||
<div className="flex justify-between border-b border-gray-50 pb-3"><span>Proshop:</span><span dangerouslySetInnerHTML={{ __html: amenities.proshop ? String(amenities.proshop).replace('Ja', `<span class="${linkClass}">Ja</span>`) : 'Nei' }} /></div>
|
||||
<div className="flex justify-between border-b border-gray-50 pb-3"><span>Simulator:</span><span dangerouslySetInnerHTML={{ __html: amenities.simulator ? String(amenities.simulator).replace('Ja', `<span class="${linkClass}">Ja</span>`) : 'Nei' }} /></div>
|
||||
<div className="flex justify-between"><span>Head Pro:</span><span className="text-orange-600 font-bold" dangerouslySetInnerHTML={{ __html: amenities.pro || '--' }} /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* KART SEKSJON */}
|
||||
{/* 6. KART SEKSJON */}
|
||||
<section id="map" className="space-y-6">
|
||||
<h2 className="text-3xl md:text-4xl font-black uppercase tracking-tighter flex items-center gap-5 ml-6 md:ml-0">Kart <span className="h-1 flex-grow bg-gray-100 rounded-full" /></h2>
|
||||
<div className="w-full md:rounded-[3rem] overflow-hidden shadow-xl h-[450px] md:h-[650px] border-y-4 md:border-[12px] border-white bg-gray-100"><iframe width="100%" height="100%" style={{ border: 0 }} src={`https://maps.google.com/maps?q=${facility.lat},${facility.lng}&t=k&z=15&ie=UTF8&iwloc=&output=embed`} allowFullScreen /></div>
|
||||
<div className="w-full md:rounded-[3rem] overflow-hidden shadow-xl h-[450px] md:h-[650px] border-y-4 md:border-[12px] border-white bg-gray-100">
|
||||
<iframe width="100%" height="100%" style={{ border: 0 }} src={`https://maps.google.com/maps?q=${facility.lat},${facility.lng}&t=k&z=15&ie=UTF8&iwloc=&output=embed`} allowFullScreen />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* PRISER SEKSJON */}
|
||||
{/* 7. VIDEO SEKSJON */}
|
||||
{facility.video_url && (
|
||||
<section id="video" className="space-y-6">
|
||||
<h2 className="text-3xl md:text-4xl font-black uppercase tracking-tighter flex items-center gap-5 ml-6 md:ml-0">Video <span className="h-1 flex-grow bg-gray-100 rounded-full" /></h2>
|
||||
<div className="w-full md:rounded-[3rem] overflow-hidden shadow-2xl aspect-video bg-black border-y-4 md:border-[12px] border-white">
|
||||
<iframe src={facility.video_url} className="w-full h-full" allowFullScreen />
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* 8. PRISER SEKSJON */}
|
||||
<section id="prices" className="grid grid-cols-1 lg:grid-cols-2 gap-0 md:gap-8">
|
||||
<div className="bg-white p-10 md:p-14 md:rounded-[3rem] shadow-sm border-b md:border-none">
|
||||
<h3 className="text-2xl font-black mb-10 uppercase tracking-tighter">⛳ Gjestespill</h3>
|
||||
<div className="space-y-2">
|
||||
{greenfee.length > 0 ? (
|
||||
greenfee.map((g: any, i: number) => (
|
||||
<div key={i} className="flex justify-between py-4 border-b border-gray-50 font-bold text-lg"><span>{g.priskategori}</span><span>kr {g.pris_voksne || '--'},-</span></div>
|
||||
<div key={i} className="flex justify-between py-4 border-b border-gray-50 font-bold text-lg"><span className="text-gray-400">{g.priskategori}</span><span>kr {g.pris_voksne || '--'},-</span></div>
|
||||
))
|
||||
) : <p className="text-gray-400 italic py-6">Ingen priser funnet.</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-10 md:p-14 md:rounded-[3rem] shadow-sm border-b md:border-none flex flex-col justify-between">
|
||||
<div>
|
||||
<h3 className="text-2xl font-black mb-10 uppercase tracking-tighter">💛 Medlemskap</h3>
|
||||
|
|
@ -245,7 +258,7 @@ export default function FacilityDetailView({ facility }: { facility: any }) {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
{/* SCOREKORT SEKSJON */}
|
||||
{/* 9. SCOREKORT SEKSJON */}
|
||||
<section id="scorecards" className="pt-10 space-y-20 overflow-hidden">
|
||||
<h3 className="text-center text-3xl md:text-5xl font-black uppercase tracking-tighter">Scorekort</h3>
|
||||
<div className="w-full flex flex-col items-center gap-20">
|
||||
|
|
|
|||
Loading…
Reference in a new issue