104 lines
2.9 KiB
TypeScript
104 lines
2.9 KiB
TypeScript
"use client"
|
|
|
|
import React, { useRef, useState, useCallback } from "react"
|
|
import dynamic from "next/dynamic"
|
|
import Image from "next/image"
|
|
import { ChevronLeft, ChevronRight } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
|
|
const HTMLFlipBook = dynamic(() => import("react-pageflip"), { ssr: false })
|
|
|
|
const TOTAL_SLIDES = 12
|
|
|
|
const Page = React.forwardRef<HTMLDivElement, { number: number }>(
|
|
function Page({ number }, ref) {
|
|
return (
|
|
<div ref={ref} className="bg-white">
|
|
<Image
|
|
src={`/slides/slide-${String(number).padStart(2, "0")}.jpg`}
|
|
alt={`Sponsorship deck slide ${number}`}
|
|
width={1200}
|
|
height={675}
|
|
className="w-full h-full object-contain"
|
|
priority={number <= 2}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
)
|
|
|
|
export default function SponsorshipFlipbook() {
|
|
const bookRef = useRef<any>(null)
|
|
const [currentPage, setCurrentPage] = useState(0)
|
|
|
|
const onFlip = useCallback((e: any) => {
|
|
setCurrentPage(e.data)
|
|
}, [])
|
|
|
|
const prevPage = () => bookRef.current?.pageFlip()?.flipPrev()
|
|
const nextPage = () => bookRef.current?.pageFlip()?.flipNext()
|
|
|
|
return (
|
|
<div className="flex flex-col items-center gap-4">
|
|
<div className="w-full" style={{ aspectRatio: "16/9" }}>
|
|
{/* @ts-expect-error react-pageflip types are incomplete */}
|
|
<HTMLFlipBook
|
|
ref={bookRef}
|
|
width={600}
|
|
height={338}
|
|
size="stretch"
|
|
minWidth={300}
|
|
maxWidth={1200}
|
|
minHeight={169}
|
|
maxHeight={675}
|
|
showCover={true}
|
|
mobileScrollSupport={true}
|
|
onFlip={onFlip}
|
|
className="mx-auto"
|
|
style={{}}
|
|
maxShadowOpacity={0.3}
|
|
drawShadow={true}
|
|
usePortrait={true}
|
|
flippingTime={600}
|
|
startPage={0}
|
|
autoSize={true}
|
|
startZIndex={0}
|
|
clickEventForward={true}
|
|
useMouseEvents={true}
|
|
swipeDistance={30}
|
|
showPageCorners={true}
|
|
disableFlipByClick={false}
|
|
>
|
|
{Array.from({ length: TOTAL_SLIDES }, (_, i) => (
|
|
<Page key={i + 1} number={i + 1} />
|
|
))}
|
|
</HTMLFlipBook>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
onClick={prevPage}
|
|
disabled={currentPage === 0}
|
|
aria-label="Previous page"
|
|
>
|
|
<ChevronLeft className="w-4 h-4" />
|
|
</Button>
|
|
<span className="text-sm text-muted-foreground min-w-[4rem] text-center">
|
|
{currentPage + 1} / {TOTAL_SLIDES}
|
|
</span>
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
onClick={nextPage}
|
|
disabled={currentPage >= TOTAL_SLIDES - 1}
|
|
aria-label="Next page"
|
|
>
|
|
<ChevronRight className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|