42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
import React, { useRef, useState, useEffect } from 'react';
|
|
import Head from "next/head";
|
|
import Image from "next/image";
|
|
import Flipbook from "~/components/Flipbook";
|
|
|
|
export default function Home() {
|
|
const mainRef = useRef<HTMLDivElement>(null);
|
|
const [mainWidth, setMainWidth] = useState(350); // default value
|
|
|
|
useEffect(() => {
|
|
if (mainRef.current) {
|
|
setMainWidth(mainRef.current.offsetWidth/2.3);
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>Create T3 App</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
</Head>
|
|
<main className="" ref={mainRef}>
|
|
<Flipbook className="" width={mainWidth} height={mainWidth*1123/794}>
|
|
<div className="bg-gray-300">
|
|
<div className="flex justify-center items-center h-full">
|
|
<a href="https://www.raphyartsy.com/files/KerstNieuw_Raam_2023-24_RArtsy.pdf" target="_blank" className="border-my-red border-[3px] p-4 rounded-full flex gap-2 cursor-pointer hover:border-black hover:bg-white font-mono font-bold text-sm tracking-wide">
|
|
PDF DOWNLOAD
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{Array.from(Array(19), (_, i) => (
|
|
<div className="bg-white" key={i}>
|
|
<Image key={i} alt="pdf page" height={468} width={mainWidth} src={`/catalogus2023/img/pdf_Page${i + 1}.png`} />
|
|
</div>
|
|
))}
|
|
<div className="bg-gray-300" />
|
|
</Flipbook>
|
|
</main>
|
|
</>
|
|
);
|
|
}
|