64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import Image from "next/image"
|
|
import { ChevronLeft, ChevronRight } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
|
|
const TOTAL_SLIDES = 12
|
|
|
|
export default function SponsorshipFlipbook() {
|
|
const [currentSlide, setCurrentSlide] = useState(0)
|
|
|
|
const prevSlide = () => setCurrentSlide((s) => Math.max(0, s - 1))
|
|
const nextSlide = () => setCurrentSlide((s) => Math.min(TOTAL_SLIDES - 1, s + 1))
|
|
|
|
return (
|
|
<div className="flex flex-col items-center gap-4">
|
|
<div className="relative w-full overflow-hidden rounded-xl border border-border shadow-lg bg-black">
|
|
<div
|
|
className="flex transition-transform duration-500 ease-in-out"
|
|
style={{ transform: `translateX(-${currentSlide * 100}%)` }}
|
|
>
|
|
{Array.from({ length: TOTAL_SLIDES }, (_, i) => (
|
|
<div key={i} className="w-full flex-shrink-0">
|
|
<Image
|
|
src={`/slides/slide-${String(i + 1).padStart(2, "0")}.jpg`}
|
|
alt={`Sponsorship deck slide ${i + 1}`}
|
|
width={1200}
|
|
height={675}
|
|
className="w-full h-auto"
|
|
priority={i <= 1}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
onClick={prevSlide}
|
|
disabled={currentSlide === 0}
|
|
aria-label="Previous slide"
|
|
>
|
|
<ChevronLeft className="w-4 h-4" />
|
|
</Button>
|
|
<span className="text-sm text-muted-foreground min-w-[4rem] text-center">
|
|
{currentSlide + 1} / {TOTAL_SLIDES}
|
|
</span>
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
onClick={nextSlide}
|
|
disabled={currentSlide >= TOTAL_SLIDES - 1}
|
|
aria-label="Next slide"
|
|
>
|
|
<ChevronRight className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|