-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
0a0c719
commit 8531898
Showing
6 changed files
with
165 additions
and
135 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
255 changes: 128 additions & 127 deletions
255
src/components/sections/home/hero/sponsorship-package.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,127 +1,128 @@ | ||
'use client' | ||
|
||
import 'react-pdf/dist/Page/TextLayer.css' | ||
import 'react-pdf/dist/Page/AnnotationLayer.css' | ||
|
||
import { useCallback, useEffect, useMemo, useState } from 'react' | ||
import { Document, Page, pdfjs } from 'react-pdf' | ||
import ShinyButton from '@/components/twilight/shiny-button/shiny-button' | ||
|
||
pdfjs.GlobalWorkerOptions.workerSrc = new URL( | ||
'pdfjs-dist/build/pdf.worker.min.mjs', | ||
import.meta.url, | ||
).toString() | ||
|
||
export function SponsorshipPackage() { | ||
const numPages = 11 | ||
const [pageIndex, setPageIndex] = useState<number>(0) | ||
|
||
const calculateScale = useCallback(() => { | ||
const MIN_SCALE = 0.2 | ||
const MAX_SCALE = 0.38 | ||
|
||
const MIN_WIDTH = 320 | ||
const MAX_WIDTH = 768 | ||
const MIN_HEIGHT = 500 | ||
|
||
const calculateWidthScale = () => { | ||
if (window.innerWidth < MIN_WIDTH) { | ||
return MIN_SCALE | ||
} | ||
if (window.innerWidth > MAX_WIDTH) { | ||
return MAX_SCALE | ||
} | ||
return ( | ||
MIN_SCALE | ||
+ (MAX_SCALE - MIN_SCALE) | ||
* ((window.innerWidth - MIN_WIDTH) / (MAX_WIDTH - MIN_WIDTH)) | ||
) | ||
} | ||
|
||
const calculateHeightScale = () => { | ||
return window.innerHeight < MIN_HEIGHT ? MIN_SCALE : MAX_SCALE | ||
} | ||
|
||
const widthScale = calculateWidthScale() | ||
const heightScale = calculateHeightScale() | ||
|
||
// Return the minimum scale to ensure it fits within both width and height constraints | ||
return Math.min(widthScale, heightScale) | ||
}, []) | ||
|
||
const [scale, setScale] = useState<number>(calculateScale()) | ||
|
||
useEffect(() => { | ||
const handleResize = () => { | ||
setScale(calculateScale()) | ||
} | ||
|
||
window.addEventListener('resize', handleResize) | ||
return () => window.removeEventListener('resize', handleResize) | ||
}, [calculateScale]) | ||
|
||
const file = useMemo(() => 'spac-patronage-package-2024.pdf', []) | ||
|
||
return ( | ||
<> | ||
<ShinyButton | ||
text="Become a Patron" | ||
// eslint-disable-next-line no-console | ||
onClick={() => console.log('clicked')} | ||
/> | ||
|
||
<dialog id="sponsorship-package-modal" className="modal"> | ||
<div className="modal-box relative h-3/4 space-y-2 scroll-smooth px-0"> | ||
<Document file={file}> | ||
{Array.from({ length: numPages }).map((_, index) => ( | ||
<Page | ||
key={`page_${index}`} | ||
canvasBackground="transparent" | ||
className="flex justify-center" | ||
scale={scale} | ||
inputRef={(ref) => { | ||
if (ref && pageIndex === index) { | ||
ref.scrollIntoView() | ||
} | ||
}} | ||
pageIndex={index} | ||
/> | ||
))} | ||
</Document> | ||
{/* Buttons and page number */} | ||
<div className="left-0 top-0 z-10 w-full space-y-2"> | ||
<div className="flex justify-center space-x-2"> | ||
<button | ||
type="button" | ||
className="btn btn-outline btn-accent" | ||
onClick={() => | ||
setPageIndex((pageIndex - 1 + numPages) % numPages)} | ||
> | ||
Previous | ||
</button> | ||
<button | ||
type="button" | ||
className="btn btn-outline btn-accent" | ||
onClick={() => setPageIndex((pageIndex + 1) % numPages)} | ||
> | ||
Next | ||
</button> | ||
</div> | ||
<p className="flex justify-center"> | ||
Page | ||
{' '} | ||
{pageIndex + 1} | ||
{' '} | ||
of | ||
{' '} | ||
{numPages} | ||
</p> | ||
</div> | ||
</div> | ||
<form method="dialog" className="modal-backdrop"> | ||
<button type="button">close</button> | ||
</form> | ||
</dialog> | ||
</> | ||
) | ||
} | ||
// TODO: Re - enable SponsorshipPackage component. Diabled due to failing build. | ||
// 'use client' | ||
// | ||
// import 'react-pdf/dist/Page/TextLayer.css' | ||
// import 'react-pdf/dist/Page/AnnotationLayer.css' | ||
// | ||
// import { useCallback, useEffect, useMemo, useState } from 'react' | ||
// import { Document, Page, pdfjs } from 'react-pdf' | ||
// import { ShinyButton } from '@/components/twilight/shiny-button/shiny-button' | ||
// | ||
// pdfjs.GlobalWorkerOptions.workerSrc = new URL( | ||
// 'pdfjs-dist/build/pdf.worker.min.mjs', | ||
// import.meta.url, | ||
// ).toString() | ||
// | ||
// export function SponsorshipPackage() { | ||
// const numPages = 11 | ||
// const [pageIndex, setPageIndex] = useState<number>(0) | ||
// | ||
// const calculateScale = useCallback(() => { | ||
// const MIN_SCALE = 0.2 | ||
// const MAX_SCALE = 0.38 | ||
// | ||
// const MIN_WIDTH = 320 | ||
// const MAX_WIDTH = 768 | ||
// const MIN_HEIGHT = 500 | ||
// | ||
// const calculateWidthScale = () => { | ||
// if (window.innerWidth < MIN_WIDTH) { | ||
// return MIN_SCALE | ||
// } | ||
// if (window.innerWidth > MAX_WIDTH) { | ||
// return MAX_SCALE | ||
// } | ||
// return ( | ||
// MIN_SCALE | ||
// + (MAX_SCALE - MIN_SCALE) | ||
// * ((window.innerWidth - MIN_WIDTH) / (MAX_WIDTH - MIN_WIDTH)) | ||
// ) | ||
// } | ||
// | ||
// const calculateHeightScale = () => { | ||
// return window.innerHeight < MIN_HEIGHT ? MIN_SCALE : MAX_SCALE | ||
// } | ||
// | ||
// const widthScale = calculateWidthScale() | ||
// const heightScale = calculateHeightScale() | ||
// | ||
// // Return the minimum scale to ensure it fits within both width and height constraints | ||
// return Math.min(widthScale, heightScale) | ||
// }, []) | ||
// | ||
// const [scale, setScale] = useState<number>(calculateScale()) | ||
// | ||
// useEffect(() => { | ||
// const handleResize = () => { | ||
// setScale(calculateScale()) | ||
// } | ||
// | ||
// window.addEventListener('resize', handleResize) | ||
// return () => window.removeEventListener('resize', handleResize) | ||
// }, [calculateScale]) | ||
// | ||
// const file = useMemo(() => 'spac-patronage-package-2024.pdf', []) | ||
// | ||
// return ( | ||
// <> | ||
// <ShinyButton | ||
// text="Become a Patron" | ||
// // eslint-disable-next-line no-console | ||
// onClick={() => console.log('clicked')} | ||
// /> | ||
// | ||
// <dialog id="sponsorship-package-modal" className="modal"> | ||
// <div className="modal-box relative h-3/4 space-y-2 scroll-smooth px-0"> | ||
// <Document file={file}> | ||
// {Array.from({ length: numPages }).map((_, index) => ( | ||
// <Page | ||
// key={`page_${index}`} | ||
// canvasBackground="transparent" | ||
// className="flex justify-center" | ||
// scale={scale} | ||
// inputRef={(ref) => { | ||
// if (ref && pageIndex === index) { | ||
// ref.scrollIntoView() | ||
// } | ||
// }} | ||
// pageIndex={index} | ||
// /> | ||
// ))} | ||
// </Document> | ||
// {/* Buttons and page number */} | ||
// <div className="left-0 top-0 z-10 w-full space-y-2"> | ||
// <div className="flex justify-center space-x-2"> | ||
// <button | ||
// type="button" | ||
// className="btn btn-outline btn-accent" | ||
// onClick={() => | ||
// setPageIndex((pageIndex - 1 + numPages) % numPages)} | ||
// > | ||
// Previous | ||
// </button> | ||
// <button | ||
// type="button" | ||
// className="btn btn-outline btn-accent" | ||
// onClick={() => setPageIndex((pageIndex + 1) % numPages)} | ||
// > | ||
// Next | ||
// </button> | ||
// </div> | ||
// <p className="flex justify-center"> | ||
// Page | ||
// {' '} | ||
// {pageIndex + 1} | ||
// {' '} | ||
// of | ||
// {' '} | ||
// {numPages} | ||
// </p> | ||
// </div> | ||
// </div> | ||
// <form method="dialog" className="modal-backdrop"> | ||
// <button type="button">close</button> | ||
// </form> | ||
// </dialog> | ||
// </> | ||
// ) | ||
// } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters