63 lines
2.2 KiB
TypeScript
63 lines
2.2 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from "react"
|
|
import { ChevronLeft, ChevronRight } from "lucide-react"
|
|
|
|
const images = [
|
|
"https://api-new.harifsport.com/home/img/editable/casj-1822.jpg",
|
|
"https://api-new.harifsport.com/home/img/editable/casj-18s.jpg"
|
|
]
|
|
|
|
export function HeroBanner() {
|
|
const [currentIndex, setCurrentIndex] = useState(0)
|
|
|
|
useEffect(() => {
|
|
const timer = setInterval(() => {
|
|
setCurrentIndex((prev) => (prev + 1) % images.length)
|
|
}, 5000)
|
|
return () => clearInterval(timer)
|
|
}, [])
|
|
|
|
return (
|
|
<div className="w-full h-[240px] md:h-[300px] relative overflow-hidden rounded-none group shadow-lg bg-brand-bg">
|
|
{images.map((src, index) => (
|
|
<img
|
|
key={src}
|
|
src={src}
|
|
alt={`Banner ${index + 1}`}
|
|
className={`absolute inset-0 object-contain w-full h-full transition-opacity duration-1000 ${
|
|
index === currentIndex ? "opacity-100" : "opacity-0"
|
|
}`}
|
|
/>
|
|
))}
|
|
|
|
{/* Navigation Arrows */}
|
|
<button
|
|
onClick={() => setCurrentIndex((prev) => (prev - 1 + images.length) % images.length)}
|
|
className="absolute left-4 top-1/2 -translate-y-1/2 bg-black/60 p-2 text-white/80 hover:text-white transition-colors opacity-0 group-hover:opacity-100"
|
|
>
|
|
<ChevronLeft className="size-6" />
|
|
</button>
|
|
<button
|
|
onClick={() => setCurrentIndex((prev) => (prev + 1) % images.length)}
|
|
className="absolute right-4 top-1/2 -translate-y-1/2 bg-black/60 p-2 text-white/80 hover:text-white transition-colors opacity-0 group-hover:opacity-100"
|
|
>
|
|
<ChevronRight className="size-6" />
|
|
</button>
|
|
|
|
{/* Indicators */}
|
|
<div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-1.5 px-3 py-1.5 rounded-full bg-black/30 backdrop-blur-sm">
|
|
{images.map((_, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => setCurrentIndex(index)}
|
|
className={`w-1.5 h-1.5 rounded-full transition-all ${
|
|
index === currentIndex ? "bg-brand-primary scale-125" : "bg-white/40"
|
|
}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|