\n {renderedText()}\n {renderedBeacon()}\n
\n \n );\n};\n\nexport default Card;\n","import React from \"react\";\nimport navLeft from \"../images/icon/arrow_left.svg\";\nimport navRight from \"../images/icon/arrow_right.svg\";\n\nconst Nav = ({ onNavigation, currentIndex }) => {\n const handleNextClick = (e) => {\n e.preventDefault();\n onNavigation(1);\n };\n\n const handlePreviousClick = (e) => {\n e.preventDefault();\n onNavigation(-1);\n };\n\n const identifier = `${currentIndex.flow}-${currentIndex.section + 1}`;\n\n return (\n \n \n 
\n \n \n 
\n \n
\n );\n};\n\nexport default Nav;\n","import React from \"react\";\nimport menuClosed from \"../images/icon/menu_open.svg\";\nimport menuOpen from \"../images/icon/menu_close.svg\";\nimport quietOn from \"../images/icon/quiet_mode_on.svg\";\nimport quietOff from \"../images/icon/quiet_mode_off.svg\";\n\nconst Options = ({\n onMenu,\n onQuiet,\n menuStatus,\n quietStatus,\n currentIndex,\n}) => {\n const handleMenuClick = (e) => {\n e.preventDefault();\n onMenu();\n };\n const handleQuietClick = (e) => {\n e.preventDefault();\n onQuiet();\n };\n\n const renderMenuIcon = () => {\n const menuIcon = menuStatus ? menuOpen : menuClosed;\n return menuIcon;\n };\n\n const renderQuietIcon = () => {\n const quietIcon = quietStatus ? quietOff : quietOn;\n return quietIcon;\n };\n\n const renderQuietText = () => {\n if (quietStatus) {\n return (\n \n Quiet mode:
Off\n
\n Quiet mode:
On\n
\n \n })
\n \n \n })
\n \n {renderQuietText()}\n
\n );\n};\n\nexport default Options;\n","import React, { useState, useEffect } from \"react\";\nimport ImageBuffer from \"./ImageBuffer\";\nimport Image from \"./Image\";\nimport Card from \"./Card\";\nimport Nav from \"./Nav\";\nimport Options from \"./Options\";\n\nconst Section = ({ data }) => {\n const [currentIndex, setCurrentIndex] = useState({\n flow: 0,\n section: 0,\n });\n const [quietStatus, setQuietStatus] = useState(true);\n const [isMenuVisible, setIsMenuVisible] = useState(false);\n const [imageWidth, setImageWidth] = useState(0);\n const [imageHeight, setImageHeight] = useState(0);\n const currentSectionData =\n data[currentIndex.flow].sections[currentIndex.section];\n const bufferSectionData = data[currentIndex.flow].sections;\n\n const updateSection = (direction) => {\n let newSection =\n direction > 0 ? currentIndex.section + 1 : currentIndex.section - 1;\n if (\n newSection < data[currentIndex.flow].sections.length &&\n newSection > -1\n ) {\n setCurrentIndex({ flow: currentIndex.flow, section: newSection });\n } else {\n const newFlow =\n direction > 0 ? currentIndex.flow + 1 : currentIndex.flow - 1;\n if (\n currentIndex.flow < data.length &&\n newFlow < data.length &&\n newFlow > -1\n ) {\n setCurrentIndex({\n flow: newFlow,\n section: direction > 0 ? 0 : data[newFlow].sections.length - 1,\n });\n }\n }\n };\n\n const updateQuietStatus = () => {\n let status = !quietStatus;\n setQuietStatus(status);\n };\n\n const updateMenu = () => {\n let status = !isMenuVisible;\n setIsMenuVisible(status);\n };\n\n const calculateAspectRatioFit = (\n srcWidth,\n srcHeight,\n maxWidth,\n maxHeight,\n offset\n ) => {\n var ratio = Math.min((maxWidth - offset) / srcWidth, maxHeight / srcHeight);\n return { height: srcHeight * ratio, width: srcWidth * ratio };\n };\n\n const handleResize = () => {\n let imgSize = calculateAspectRatioFit(\n 1920,\n 1080,\n window.innerWidth,\n window.innerHeight,\n 0\n );\n setImageHeight(imgSize.height);\n setImageWidth(imgSize.width);\n };\n\n const handleMenuItemClick = (id, e) => {\n e.preventDefault();\n setCurrentIndex({ flow: id, section: 0 });\n };\n\n const keyDownHandler = ({ key }) => {\n if (key === \"ArrowRight\") {\n updateSection(1);\n } else if (key === \"ArrowLeft\") {\n updateSection(-1);\n }\n };\n\n useEffect(() => {\n handleResize();\n window.addEventListener(\"resize\", handleResize);\n document.addEventListener(\"keydown\", keyDownHandler);\n document.body.addEventListener(\"mousedown\", () => {\n document.body.classList.add(\"using-mouse\");\n });\n document.body.addEventListener(\"keydown\", () => {\n document.body.classList.remove(\"using-mouse\");\n });\n\n return () => {\n window.removeEventListener(\"resize\", handleResize);\n document.removeEventListener(\"keydown\", keyDownHandler);\n document.body.removeEventListener(\"mousedown\", () => {\n document.body.classList.add(\"using-mouse\");\n });\n document.body.removeEventListener(\"keydown\", () => {\n document.body.classList.remove(\"using-mouse\");\n });\n };\n });\n\n const screenReaderText = () => {\n const slideLocation = `Step ${currentIndex.flow + 1}, Section ${\n currentIndex.section + 1\n }`;\n return (\n \n {slideLocation}\n
\n );\n };\n\n const renderedMenuItems = data.map((flow, index) => {\n const identifier = `${currentIndex.flow}-${currentIndex.section + 1}`;\n if (flow.sections[0].card.transition) {\n return (\n \n
\n {currentSectionData.screenReaderText}
\n{currentSectionData.card.text}
\n\n
\n \n \n );\n } else {\n return (\n - {renderedMenuItems}
\n
\n \n - {renderedMenuItems}
\n \n {renderSlideType()}\n \n
\n \n {screenReaderText()}\n \n \n
\n );\n } else {\n return ;\n }\n};\n\nexport default App;\n","import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App from \"./App\";\n\nReactDOM.render(