59 lines
No EOL
2.6 KiB
Text
59 lines
No EOL
2.6 KiB
Text
"use client";
|
|
import { useState, useEffect, useMemo } from 'react';
|
|
import Link from 'next/link';
|
|
|
|
export default function HeroSlider({ facilities }: { facilities: any[] }) {
|
|
const [currentIndex, setCurrentSlide] = useState(0);
|
|
|
|
const sliderItems = useMemo(() => {
|
|
if (!Array.isArray(facilities) || facilities.length === 0) return [];
|
|
|
|
return facilities.filter(f => {
|
|
const img = f.image_url || "";
|
|
// Filter: Unngå standardbilder og krev fungerende bilde-sti
|
|
const isRealImage = img && !img.toLowerCase().includes('standard');
|
|
|
|
const statuses = Array.isArray(f.course_statuses) ? f.course_statuses : [];
|
|
const isActive = statuses.some((s: any) =>
|
|
['aapen', 'aapner_snart', 'stenger_snart', 'aapen_med_vintergreener'].includes(s.status)
|
|
);
|
|
|
|
return isRealImage && isActive;
|
|
})
|
|
.sort(() => 0.5 - Math.random()) // Tilfeldig utvalg ved last
|
|
.slice(0, 5);
|
|
}, [facilities]);
|
|
|
|
useEffect(() => {
|
|
if (sliderItems.length <= 1) return;
|
|
const t = setInterval(() => setCurrentSlide(p => (p + 1) % sliderItems.length), 6000);
|
|
return () => clearInterval(t);
|
|
}, [sliderItems]);
|
|
|
|
if (sliderItems.length === 0) return null;
|
|
|
|
return (
|
|
<div className="relative h-[60vh] md:h-[75vh] w-full overflow-hidden bg-[#11280f]">
|
|
{sliderItems.map((f, i) => (
|
|
<div key={f.id} className={`absolute inset-0 transition-opacity duration-1000 ${i === currentIndex ? 'opacity-100 z-10' : 'opacity-0 z-0'}`}>
|
|
<Link href={`/golfbaner/${f.slug}`} className="block h-full relative group">
|
|
<div className="absolute inset-0 bg-gradient-to-r from-black/70 via-transparent to-black/20 z-10" />
|
|
<img src={f.image_url} alt="" className="w-full h-full object-cover transition-transform duration-[10s] group-hover:scale-110" />
|
|
<div className="absolute inset-0 z-20 flex items-center">
|
|
<div className="max-w-[1400px] mx-auto px-6 w-full">
|
|
<div className="min-h-[120px] md:min-h-[200px] flex flex-col justify-end">
|
|
<h2 className="text-5xl md:text-8xl font-black text-white tracking-tighter drop-shadow-2xl leading-[0.9] max-w-4xl line-clamp-2">
|
|
{f.name}
|
|
</h2>
|
|
<p className="text-white/90 text-lg md:text-2xl mt-4 font-bold uppercase tracking-[0.3em] drop-shadow-md">
|
|
{f.county} • {f.city}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
} |