127 lines
3.7 KiB
TypeScript
127 lines
3.7 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useRef, useCallback } from "react"
|
|
import Image from "next/image"
|
|
import { ChevronLeft, ChevronRight } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
|
|
const TOTAL_SLIDES = 12
|
|
const SWIPE_THRESHOLD = 50
|
|
|
|
export default function SponsorshipFlipbook() {
|
|
const [currentSlide, setCurrentSlide] = useState(0)
|
|
const [isFlipping, setIsFlipping] = useState(false)
|
|
const [flipDirection, setFlipDirection] = useState<"left" | "right">("left")
|
|
const touchStartX = useRef(0)
|
|
const touchEndX = useRef(0)
|
|
|
|
const goTo = useCallback(
|
|
(direction: "prev" | "next") => {
|
|
if (isFlipping) return
|
|
if (direction === "prev" && currentSlide === 0) return
|
|
if (direction === "next" && currentSlide >= TOTAL_SLIDES - 1) return
|
|
|
|
setFlipDirection(direction === "next" ? "left" : "right")
|
|
setIsFlipping(true)
|
|
|
|
setTimeout(() => {
|
|
setCurrentSlide((s) =>
|
|
direction === "next"
|
|
? Math.min(TOTAL_SLIDES - 1, s + 1)
|
|
: Math.max(0, s - 1)
|
|
)
|
|
setIsFlipping(false)
|
|
}, 400)
|
|
},
|
|
[currentSlide, isFlipping]
|
|
)
|
|
|
|
const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
|
|
const rect = e.currentTarget.getBoundingClientRect()
|
|
const clickX = e.clientX - rect.left
|
|
if (clickX < rect.width / 2) {
|
|
goTo("prev")
|
|
} else {
|
|
goTo("next")
|
|
}
|
|
}
|
|
|
|
const handleTouchStart = (e: React.TouchEvent) => {
|
|
touchStartX.current = e.touches[0].clientX
|
|
touchEndX.current = e.touches[0].clientX
|
|
}
|
|
|
|
const handleTouchMove = (e: React.TouchEvent) => {
|
|
touchEndX.current = e.touches[0].clientX
|
|
}
|
|
|
|
const handleTouchEnd = () => {
|
|
const diff = touchStartX.current - touchEndX.current
|
|
if (Math.abs(diff) > SWIPE_THRESHOLD) {
|
|
goTo(diff > 0 ? "next" : "prev")
|
|
}
|
|
}
|
|
|
|
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 cursor-pointer select-none"
|
|
style={{ perspective: "1200px" }}
|
|
onClick={handleClick}
|
|
onTouchStart={handleTouchStart}
|
|
onTouchMove={handleTouchMove}
|
|
onTouchEnd={handleTouchEnd}
|
|
>
|
|
<div
|
|
className="w-full"
|
|
style={{
|
|
transformOrigin:
|
|
flipDirection === "left" ? "left center" : "right center",
|
|
transition: isFlipping
|
|
? "transform 0.4s ease-in-out, opacity 0.4s ease-in-out"
|
|
: "none",
|
|
transform: isFlipping
|
|
? `rotateY(${flipDirection === "left" ? "-90deg" : "90deg"})`
|
|
: "rotateY(0deg)",
|
|
opacity: isFlipping ? 0 : 1,
|
|
}}
|
|
>
|
|
<Image
|
|
src={`/slides/slide-${String(currentSlide + 1).padStart(2, "0")}.jpg`}
|
|
alt={`Sponsorship deck slide ${currentSlide + 1}`}
|
|
width={1200}
|
|
height={675}
|
|
className="w-full h-auto"
|
|
priority
|
|
draggable={false}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
onClick={() => goTo("prev")}
|
|
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={() => goTo("next")}
|
|
disabled={currentSlide >= TOTAL_SLIDES - 1}
|
|
aria-label="Next slide"
|
|
>
|
|
<ChevronRight className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|