diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index cad671d..a1c6600 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -7,7 +7,9 @@ "customizations": { "vscode": { "extensions": [ - "bradlc.vscode-tailwindcss" + "bradlc.vscode-tailwindcss", + "GitHub.copilot", + "esbenp.prettier-vscode" ] } } diff --git a/next.config.mjs b/next.config.mjs index 61964ea..6a9fe68 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -13,9 +13,9 @@ const config = { * * @see https://github.com/vercel/next.js/issues/41980 */ - i18n: { - locales: ["en"], - defaultLocale: "en", + output: 'export', + images: { + unoptimized: true, }, }; diff --git a/src/components/Flipbook.tsx b/src/components/Flipbook.tsx index 42df56a..7306753 100644 --- a/src/components/Flipbook.tsx +++ b/src/components/Flipbook.tsx @@ -1,12 +1,12 @@ -import { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons'; -import React, { useRef, useCallback } from 'react'; -import HTMLFlipBook from 'react-pageflip'; +import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons"; +import React, { useRef, useCallback } from "react"; +import HTMLFlipBook from "react-pageflip"; interface FlipbookProps { children: React.ReactNode[]; width: number; height: number; - className?: React.ComponentProps<'div'>['className']; + className?: React.ComponentProps<"div">["className"]; } interface PageFlip { @@ -21,53 +21,64 @@ export default function Flipbook(props: FlipbookProps) { const flipbook = useRef<{ pageFlip(): PageFlip } | null>(null); // Function to flip pages - const flipPage = useCallback((direction: 'next' | 'prev') => { - const flipbookCurrent = flipbook.current; - if (flipbookCurrent) { - const pageFlipObj = flipbookCurrent.pageFlip(); - const currentPageIndex = pageFlipObj.getCurrentPageIndex(); - const pageCount = pageFlipObj.getPageCount(); + const flipPage = useCallback( + (direction: "next" | "prev") => { + const flipbookCurrent = flipbook.current; + if (flipbookCurrent) { + const pageFlipObj = flipbookCurrent.pageFlip(); + const currentPageIndex = pageFlipObj.getCurrentPageIndex(); + const pageCount = pageFlipObj.getPageCount(); - if (direction === 'next') { - if (currentPageIndex + 2 === pageCount) { - pageFlipObj.flip(0); - } else { - pageFlipObj.flipNext(); - } - } else if (direction === 'prev') { - if (currentPageIndex === 0) { - pageFlipObj.flip(pageCount - 1); - } else { - pageFlipObj.flipPrev(); // Add this method to handle the previous page flip + if (direction === "next") { + if (currentPageIndex + 2 === pageCount) { + pageFlipObj.flip(0); + } else { + pageFlipObj.flipNext(); + } + } else if (direction === "prev") { + if (currentPageIndex === 0) { + pageFlipObj.flip(pageCount - 1); + } else { + pageFlipObj.flipPrev(); // Add this method to handle the previous page flip + } } } - } - }, [flipbook]); + }, + [flipbook], + ); // Handler for the next button const nextButtonClick = useCallback(() => { - flipPage('next'); + flipPage("next"); }, [flipPage]); // Handler for the previous button const prevButtonClick = useCallback(() => { - flipPage('prev'); + flipPage("prev"); }, [flipPage]); return ( -