\n
What is mihimihi? \n
\n You are the author of your own mihi. Simply go through each section, choose what you want\n to include, what not to,\n so your mihi suits the situation.\n When you’re finished your mihi\n will be available for you\n to view on this device,\n nō reira, toru, whā,\n KARAWHIUA!’\n
\n
setShowPopUp(false)}>\n
\n
setInputState(e.target.value)}\n placeholder={placeholder}\n />\n )\n}\n\nexport default Input;","import React from 'react';\nimport { Link } from 'react-router-dom'\nimport styled from 'styled-components'\nimport Title from './Title'\nimport Button from './Button';\nimport Input from './Input';\n\nconst Container = styled.div`\n text-align: center;\n width: 380px;\n margin: 0 20px;\n padding: 35px 50px;\n\n border-radius: 10px; \n opacity: 1;\n background: #FFFFFF80 0% 0% no-repeat padding-box;\n box-shadow: inset 0px 3px 6px #00000029;\n backdrop-filter: blur(3px);\n -webkit-backdrop-filter: blur(3px);\n\n @media only screen and (min-width: 768px) {\n padding: 50px 135px;\n }\n`;\n\nconst Text = styled.p`\n font-size: 12px;\n margin: -25px 0 30px 0;\n\n @media only screen and (min-width: 768px) {\n font-size: 18px;\n }\n\n @media only screen and (min-width: 1200px) {\n font-size: 20px;\n }\n`;\n\n\nconst InputQuestion = ({ imgSrc, title, text, inputValue, setInputState, placeholder, path }) => {\n return (\n\n \n {text} \n \n\n )\n}\n\nexport default InputQuestion;","\n\nexport const mountain = (input) => {\n return [\n `Ko ${input || \"...\"} te maunga`,\n `My mountain is ${input || \"...\"}`\n ]\n}\n\nexport const river = (input) => {\n return [\n `Ko ${input || \"...\"} te awa`,\n `My river is ${input || \"...\"}`\n ]\n}\n\nexport const lake = (input) => {\n return [\n `Ko ${input || \"...\"} te roto`,\n `My lake is ${input || \"...\"}`\n ]\n}\n\nexport const sea = (input) => {\n return [\n `Ko ${input || \"...\"} te moana`,\n `My sea is ${input || \"...\"}`\n ]\n}\n\n\nexport const marae = (input) => {\n return [\n `Ko ${input || \"...\"} taku marae`,\n `My marae is ${input || \"...\"}`\n ]\n}\n\n\n\n\nexport const canoe = (input) => {\n return [\n `Ko ${input || \"...\"} taku waka`,\n `My canoe is ${input || \"...\"}`\n ]\n}\n\nexport const tribe = (input) => {\n return [\n `Ko ${input || \"...\"} taku iwi`,\n `My tribe is ${input || \"...\"}`\n ]\n}\n\nexport const subTribe = (input) => {\n return [\n `Ko ${input || \"...\"} taku hapū`,\n `my sub-tribe is ${input || \"...\"}`\n ]\n}\n\nexport const iAmFrom = (input) => {\n return [\n `Nō ${input || \"...\"} ahau`,\n `I am from ${input || \"...\"}`\n ]\n}\n\nexport const family = (input) => {\n return [\n `Ko ${input || \"...\"} taku whānau`,\n `My family is ${input || \"...\"}`\n ]\n}\n\n\n\nexport const name = (input) => {\n return [\n `Ko ${input || \"...\"} taku ingoa`,\n `My name is ${input || \"...\"}`\n ]\n}\n\nexport const iWasBorn = (input) => {\n return [\n `I whānau mai ahau i ${input || \"...\"}`,\n `I was born in ${input || \"...\"}`\n ]\n}\n\nexport const iLive = (input) => {\n return [\n `E noho ana ahau i ${input || \"...\"}`,\n `I live in ${input || \"...\"}`\n ]\n}\nexport const myJob = (input) => {\n return [\n `He ${input || \"...\"} taku mahi`,\n `My job is ${input || \"...\"}`\n ]\n}\n\n\n","import React from 'react';\nimport styled from 'styled-components'\nimport TextToPrint from '../TextToPrint'\nimport InvertColor from '../InvertColor';\n\nimport {\n mountain,\n river,\n lake,\n sea,\n marae,\n canoe,\n tribe,\n subTribe,\n iAmFrom,\n family,\n name,\n iWasBorn,\n iLive,\n myJob\n\n} from './IsMaoriPepehaSentences'\n\nconst Container = styled.div`\n margin-top: -50px;\n text-align: center;\n padding: 0 10px 50px 10px;\n`;\n\nconst IsMaoriPepehaToPrintUi = ({\n autoPlayAudio,\n inputValueMountain,\n inputValueRiver,\n inputValueLake,\n inputValueSea,\n inputValueMarae,\n inputValueCanoe,\n inputValueTribe,\n inputValueSubTribe,\n inputValueWhereFrom,\n inputValueWhanau,\n inputValueName,\n inputValueWhereBorn,\n inputValueWhereLiving,\n inputValueJob,\n toPrintTheme,\n setToPrintTheme\n}) => {\n\n return (\n \n {\n inputValueMountain !== \"\" &&\n \n )\n}\n\nexport default IsMaoriPepehaToPrintUi;","import React from 'react';\nimport { Document, View, Page, Font, Image, Text, StyleSheet } from '@react-pdf/renderer';\nimport fontMedium from '../../fonts/Poppins-Medium.ttf'\nimport fontRegular from '../../fonts/Poppins-Regular.ttf'\n\nimport {\n mountain,\n river,\n lake,\n sea,\n marae,\n canoe,\n tribe,\n subTribe,\n iAmFrom,\n family,\n name,\n iWasBorn,\n iLive,\n myJob\n\n} from './IsMaoriPepehaSentences'\n\nFont.register({ family: 'PoppinsMedium', src: fontMedium })\nFont.register({ family: 'PoppinsRegular', src: fontRegular })\n\n// styling guide https://react-pdf.org/styling\nconst stylesLight = StyleSheet.create({\n page: {\n backgroundColor: 'white',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n section: {\n color: '#2D373C',\n borderTopLeftRadius: 6,\n borderTopRightRadius: 6,\n borderBottomRightRadius: 6,\n borderBottomLeftRadius: 6,\n textAlign: 'center',\n margin: 30,\n width: 500\n },\n maori_text: {\n fontSize: 12,\n fontFamily: 'PoppinsMedium'\n },\n eng_text: {\n fontSize: 10,\n fontFamily: 'PoppinsRegular',\n marginBottom: 12,\n },\n image_container: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n marginBottom: 50,\n },\n image: {\n width: 95,\n height: 70\n }\n});\n\nconst stylesDark = StyleSheet.create({\n page: {\n backgroundColor: 'black',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n section: {\n color: 'white',\n borderTopLeftRadius: 6,\n borderTopRightRadius: 6,\n borderBottomRightRadius: 6,\n borderBottomLeftRadius: 6,\n textAlign: 'center',\n margin: 30,\n width: 500\n },\n maori_text: {\n fontSize: 12,\n fontFamily: 'PoppinsMedium'\n },\n eng_text: {\n fontSize: 10,\n fontFamily: 'PoppinsRegular',\n marginBottom: 12,\n },\n image_container: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n marginBottom: 50,\n },\n image: {\n width: 95,\n height: 70\n }\n});\n\nconst MaoriText = ({ text, toPrintTheme }) => {text} \nconst EngText = ({ text, toPrintTheme }) => {text} \n\nconst IsMaoriPepehaToPrint = ({\n inputValueMountain,\n inputValueRiver,\n inputValueLake,\n inputValueSea,\n inputValueMarae,\n inputValueCanoe,\n inputValueTribe,\n inputValueSubTribe,\n inputValueWhereFrom,\n inputValueWhanau,\n inputValueName,\n inputValueWhereBorn,\n inputValueWhereLiving,\n inputValueJob,\n toPrintTheme\n}) => (\n \n \n \n \n {\n toPrintTheme ?\n \n {inputValueMountain !== \"\" &&\n <>\n \n \n \n);\n\nexport default IsMaoriPepehaToPrint;","import React, { useState } from 'react';\nimport { Link, useParams, useHistory } from 'react-router-dom';\nimport styled from 'styled-components'\nimport InputQuestion from '../InputQuestion';\nimport SectionToPrint from '../SectionToPrint'\nimport IsMaoriPepehaToPrintUi from './IsMaoriPepehaToPrintUi';\nimport IsMaoriPepehaToPrint from './IsMaoriPepehaToPrint';\nimport ExportToPDFButton from '../ExportToPDFButton';\nimport PopUpLoading from '../PopUpLoading';\nimport Button from '../Button';\nimport BasicAdvanced from '../BasicAdvanced';\nimport {\n mountain,\n river,\n lake,\n sea,\n marae,\n canoe,\n tribe,\n subTribe,\n iAmFrom,\n family,\n name,\n iWasBorn,\n iLive,\n myJob\n\n} from './IsMaoriPepehaSentences'\n\nconst ContainerToPrint = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n position: relative;\n`;\n\nconst ToPrintContainer = styled.div`\n width: 90%;\n\n @media only screen and (min-width: 650px) {\n width: 600px;\n }\n`;\n\nconst ContainerOut = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n height: 90vh;\n`;\n\nconst ContainerIn = styled.div`\n width: 100%\n\n @media only screen and (min-width: 650px) {\n width: 400px;\n }\n`;\n\n\n\nconst IsMaori = (\n {\n inputValueMountain,\n setInputStateMountain,\n inputValueRiver,\n setInputStateRiver,\n inputValueLake,\n setInputStateLake,\n inputValueSea,\n setInputValueSea,\n inputValueMarae,\n setInputValueMarae,\n inputValueCanoe,\n setInputValueCanoe,\n inputValueTribe,\n setInputValueTribe,\n inputValueSubTribe,\n setInputValueSubTribe,\n inputValueWhereFrom,\n setInputValueWhereFrom,\n inputValueWhanau,\n setInputValueWhanau,\n inputValueName,\n setInputValueName,\n inputValueWhereBorn,\n setInputValueWhereBorn,\n inputValueWhereLiving,\n setInputValueWhereLiving,\n inputValueJob,\n setInputValueJob,\n }\n) => {\n let { flow } = useParams()\n let history = useHistory()\n const [toPrintTheme, setToPrintTheme] = useState(true)\n const [autoPlayAudio, setAutoPlayAudio] = useState(false)\n const [isBasic, setIsBasic] = useState(\"error\")\n const clearHistory = function () {\n setInputStateMountain(\"\")\n setInputStateRiver(\"\")\n setInputStateLake(\"\")\n setInputValueSea(\"\")\n setInputValueMarae(\"\")\n setInputValueCanoe(\"\")\n setInputValueTribe(\"\")\n setInputValueSubTribe(\"\")\n setInputValueWhereFrom(\"\")\n setInputValueWhanau(\"\")\n setInputValueName(\"\")\n setInputValueWhereBorn(\"\")\n setInputValueWhereLiving(\"\")\n setInputValueJob(\"\")\n }\n return (\n \n
\n {\n flow === \"15\" &&\n \n \n }\n \n {\n flow < 15 &&\n
\n \n\n {\n flow === \"0.5\" &&\n \n\n \n }\n\n\n
\n {\n isBasic == true &&\n \n {inputValueAncestors !== \"\" &&\n
\n }\n {\n isBasic == false &&\n \n {inputValueAncestors !== \"\" &&\n
\n }\n \n )\n}\n\nexport default IsNotMaoriPepehaToPrintUi;","import React from 'react';\nimport { Document, View, Page, Font, Image, Text, StyleSheet } from '@react-pdf/renderer';\nimport fontMedium from '../../fonts/Poppins-Medium.ttf'\nimport fontRegular from '../../fonts/Poppins-Regular.ttf'\n\nimport {\n whereBorn,\n whereLiving,\n ancestors,\n whanau,\n name,\n mountain,\n hill,\n sea,\n river,\n lake,\n tribe,\n extra1,\n extra2,\n extra3,\n extra4,\n extra5\n} from './IsNotMaoriPepehaSentences';\n\nFont.register({ family: 'PoppinsMedium', src: fontMedium })\nFont.register({ family: 'PoppinsRegular', src: fontRegular })\n\n// styling guide https://react-pdf.org/styling\nconst stylesLight = StyleSheet.create({\n page: {\n backgroundColor: 'white',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n section: {\n color: '#2D373C',\n borderTopLeftRadius: 6,\n borderTopRightRadius: 6,\n borderBottomRightRadius: 6,\n borderBottomLeftRadius: 6,\n textAlign: 'center',\n margin: 30,\n width: 500\n },\n maori_text: {\n fontSize: 12,\n fontFamily: 'PoppinsMedium'\n },\n eng_text: {\n fontSize: 10,\n fontFamily: 'PoppinsRegular',\n marginBottom: 12,\n },\n image_container: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n marginBottom: 50,\n },\n image: {\n width: 95,\n height: 70\n }\n});\n\nconst stylesDark = StyleSheet.create({\n page: {\n backgroundColor: 'black',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n section: {\n color: 'white',\n borderTopLeftRadius: 6,\n borderTopRightRadius: 6,\n borderBottomRightRadius: 6,\n borderBottomLeftRadius: 6,\n textAlign: 'center',\n margin: 30,\n width: 500\n },\n maori_text: {\n fontSize: 12,\n fontFamily: 'PoppinsMedium'\n },\n eng_text: {\n fontSize: 10,\n fontFamily: 'PoppinsRegular',\n marginBottom: 12,\n },\n image_container: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n marginBottom: 50,\n },\n image: {\n width: 95,\n height: 70\n }\n});\n\nconst MaoriText = ({ text, toPrintTheme }) => {text} \nconst EngText = ({ text, toPrintTheme }) => {text} \n\nconst IsNotMaoriPepehaToPrint = ({\n inputValueAncestors,\n inputValueHill,\n inputValueMountain,\n inputValueRiver,\n inputValueLake,\n inputValueSea,\n inputValueExtra1,\n inputValueExtra2,\n inputValueExtra3,\n inputValueExtra4,\n inputValueExtra5,\n inputValueTribe,\n inputValueName,\n inputValueWhereBorn,\n inputValueWhereLiving,\n inputValueWhanau,\n toPrintTheme,\n isBasic\n}) => (\n \n \n \n \n {\n toPrintTheme ?\n \n {\n isBasic == true &&\n \n {inputValueAncestors !== \"\" &&\n <>\n
\n }\n {\n isBasic == false &&\n \n {inputValueAncestors !== \"\" &&\n <>\n
\n }\n \n \n \n);\n\nexport default IsNotMaoriPepehaToPrint;","import React, { useState } from 'react';\nimport { Link, useParams, useHistory } from 'react-router-dom';\nimport styled from 'styled-components'\n\nimport InputQuestion from '../InputQuestion';\nimport SectionToPrint from '../SectionToPrint'\nimport IsNotMaoriPepehaToPrintUi from './IsNotMaoriPepehaToPrintUi';\nimport IsNotMaoriPepehaToPrint from './IsNotMaoriPepehaToPrint';\nimport ExportToPDFButton from '../ExportToPDFButton';\nimport PopUpLoading from '../PopUpLoading';\n// import PopUpPepeha from '../PopUpPepeha'\nimport Button from '../Button';\nimport BasicAdvanced from '../BasicAdvanced';\nimport {\n whereBorn,\n whereLiving,\n ancestors,\n whanau,\n name,\n mountain,\n hill,\n sea,\n river,\n lake,\n tribe,\n extra1,\n extra2,\n extra3,\n extra4,\n extra5\n} from './IsNotMaoriPepehaSentences';\nimport { myJob } from './IsMaoriPepehaSentences';\n\nconst ContainerToPrint = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n`;\n\nconst ContainerOut = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n height: 90vh;\n`;\n\nconst ContainerIn = styled.div`\n width: 100%\n\n @media only screen and (min-width: 768px) {\n width: 400px;\n }\n`;\n\nconst ToPrintContainer = styled.div`\n position: sticky;\n margin: 0 10px 50px 0;\n width: 280px;\n\n @media only screen and (min-width: 768px) {\n width: 600px;\n }\n`;\n\nconst IsNotMaori = (\n {\n inputValueAncestors,\n setInputStateAncestors,\n inputValueHill,\n setInputStateHill,\n inputValueMountain,\n setInputStateMountain,\n inputValueRiver,\n setInputStateRiver,\n inputValueLake,\n setInputStateLake,\n inputValueSea,\n setInputValueSea,\n inputValueExtra1,\n setInputValueExtra1,\n inputValueExtra2,\n setInputValueExtra2,\n inputValueExtra3,\n setInputValueExtra3,\n inputValueExtra4,\n setInputValueExtra4,\n inputValueExtra5,\n setInputValueExtra5,\n inputValueTribe,\n setInputValueTribe,\n inputValueName,\n setInputValueName,\n inputValueWhereBorn,\n setInputValueWhereBorn,\n inputValueWhereLiving,\n setInputValueWhereLiving,\n inputValueWhanau,\n setInputValueWhanau,\n inputValueJob,\n setInputValueJob,\n }\n) => {\n let { flow } = useParams()\n let history = useHistory()\n const [toPrintTheme, setToPrintTheme] = useState(true)\n const [isBasic, setIsBasic] = useState(\"error\")\n const clearHistory = function () {\n setInputStateAncestors(\"\")\n setInputStateHill(\"\")\n setInputStateMountain(\"\")\n setInputStateRiver(\"\")\n setInputStateLake(\"\")\n setInputValueSea(\"\")\n setInputValueTribe(\"\")\n setInputValueName(\"\")\n setInputValueWhereBorn(\"\")\n setInputValueWhereLiving(\"\")\n setInputValueWhanau(\"\")\n setInputValueJob(\"\")\n }\n return (\n \n
\n {\n flow === \"13\" &&\n \n \n }\n \n {\n flow < 13 &&\n
\n \n\n {\n flow === \"0.5\" &&\n \n {\n flow === \"1\" &&\n
\n }\n {/* {\n flow === \"5\" &&\n \n {\n flow === \"1\" &&\n
\n }\n\n {\n flow === \"12\" &&\n \n }\n\n \n \n }\n
\n
What is pepeha? \n
\n Simply go through each section and choose relevant landmarks that reflect your connection to place.\n If you connect to multiple places, then just go through multiple times, all pepeha will be available\n for you to view on this device, nō reira, toru, whā, KARAWHIUA!\n
\n
setShowPopUp(false)}>\n
\n
\n \n \n \n {/* \n \n
\n \n }\n \n \n \n \n\n \n\n {\n pepehaView === \"1\" &&\n <>\n
\n \n \n )\n }\n\n}\n\nexport default Pepeha;","import React from 'react';\nimport styled from 'styled-components'\nimport PlayableMaoriText from './mihimihi/PlayableMaoriText';\n\nconst TitleStyled = styled.div`\n color: ${props => props.colorTextMaori};\n font-family: MediumFont;\n font-size: 20px;\n`;\n\nconst Text = styled.p`\n color: ${props => props.colorTextEng};\n margin-top: -18px;\n font-size: 15px;\n`;\n\n\nconst TextToPrintThreeChildren = ({ inputValueThreeChildren, toPrintTheme }) => {\n\n return (\n <>\n \n \n \n {` ${inputValueThreeChildren[0].name || \"...\"} and`}\n \n {inputValueThreeChildren.map((element, index) => {\n if (index > 0) return (\n \n
\n \n
\n {`${element.name || \"...\"}`}\n \n
\n \n \n are my children\n \n \n )\n}\n\nexport default TextToPrintThreeChildren;","export const sMother = (input) => {\n return [\n `Ko ${input || \"...\"} taku māmā`,\n `My mother is ${input || \"...\"}`\n ]\n}\n\nexport const sFather = (input) => {\n return [\n `Ko ${input || \"...\"} taku pāpā`,\n `My father is ${input || \"...\"}`\n ]\n}\n\nexport const sPartner = (input) => {\n return [\n `Ko ${input || \"...\"} taku whaiāipo`,\n `My partner is ${input || \"...\"}`\n ]\n}\n\nexport const sChild = (input) => {\n return [\n `Ko ${input || \"...\"} taku tamaiti`,\n `${input || \"...\"} is my child`\n ]\n}\nexport const sGrandChild = (input) => {\n return [\n `Ko ${input || \"...\"} taku mokopuna`,\n `${input || \"...\"} is my grand child`\n ]\n}\n\nexport const sTwoChildren = (input) => {\n return [\n `Ko ${input[0].name || \"...\"} rāua ko ${input[1].name || \"...\"}`,\n ` ${input[0].name || \"...\"} and ${input[1].name || \"...\"}`\n ]\n}\nexport const sTwoGrandChildren = (input) => {\n return [\n `Ko ${input[0].name || \"...\"} rāua ko ${input[1].name || \"...\"} aku mokopuna`,\n ` ${input[0].name || \"...\"} and ${input[1].name || \"...\"}`\n ]\n}\n\nexport const sMaternalGrandFather = (input) => {\n return [\n `I te taha o taku māmā, ko ${input || \"...\"} taku koroua`,\n `On my mother's side, my grandfather is ${input || \"...\"}`\n ]\n}\n\nexport const sMaternalGrandMother = (input) => {\n return [\n `I te taha o taku māmā, ko ${input || \"...\"} taku kuia`,\n `On my mother's side, my grandmother is ${input || \"...\"}`\n ]\n}\n\nexport const sPaternalGrandFather = (input) => {\n return [\n `I te taha o taku pāpā, ko ${input || \"...\"} taku koroua`,\n `On my father's side, my grandfather is ${input || \"...\"}`\n ]\n}\n\nexport const sPaternalGrandMother = (input) => {\n return [\n `I te taha o taku pāpā, ko ${input || \"...\"} taku kuia`,\n `On my father's side, my grandmother is ${input || \"...\"}`\n ]\n}","import React from 'react';\nimport styled from 'styled-components'\nimport PlayableMaoriText from './mihimihi/PlayableMaoriText';\n\nconst TitleStyled = styled.div`\n color: ${props => props.colorTextMaori};\n font-family: MediumFont;\n font-size: 20px;\n`;\n\nconst Text = styled.p`\n color: ${props => props.colorTextEng};\n margin-top: -18px;\n font-size: 15px;\n`;\n\nconst TextToPrintThreeGrandChildren = ({ inputValueThreeGrandChildren, toPrintTheme }) => {\n return (\n <>\n \n \n \n {` ${inputValueThreeGrandChildren[0].name || \"...\"} and`}\n \n {inputValueThreeGrandChildren.map((element, index) => {\n if (index > 0) return (\n \n
\n \n
\n {`${element.name || \"...\"}`}\n \n
\n \n \n are my grand children\n \n \n )\n}\n\nexport default TextToPrintThreeGrandChildren","import React from 'react';\nimport styled from 'styled-components'\nimport TextToPrint from '../TextToPrint'\nimport TextToPrintThreeChildren from '../TextToPrintThreeChildren'\nimport InvertColor from '../InvertColor';\n\nimport {\n sMother,\n sFather,\n sPartner,\n sChild,\n sTwoChildren,\n sMaternalGrandFather,\n sMaternalGrandMother,\n sPaternalGrandFather,\n sPaternalGrandMother,\n sGrandChild,\n sTwoGrandChildren,\n} from './WhakapapaSentences'\nimport TextToPrintThreeGrandChildren from '../TextToPrintThreeGrandChildren';\nimport PlayableMaoriText from '../mihimihi/PlayableMaoriText';\n\nconst Container = styled.div`\n margin-top: -50px;\n text-align: center;\n padding: 0 10px 50px 10px;\n`;\n\nconst TitleStyled = styled.p`\n color: ${props => props.colorTextMaori};\n font-family: MediumFont;\n font-size: 20px;\n`;\n\nconst Text = styled.p`\n color: ${props => props.colorTextEng};\n margin-top: -18px;\n font-size: 15px;\n`;\n\nconst IsMaoriPepehaToPrintUi = ({\n mother,\n father,\n partner,\n child,\n twoChildren,\n threeChildren,\n grandChild,\n twoGrandChildren,\n threeGrandChildren,\n maternalGrandFather,\n maternalGrandMother,\n paternalGrandFather,\n paternalGrandMother,\n setToPrintTheme,\n toPrintTheme,\n childrenNumber,\n grandChildrenNumber,\n}) => {\n\n\n return (\n \n {\n (maternalGrandFather !== \"\") && (maternalGrandMother !== \"\") &&\n \n \n are my children \n \n }\n\n {\n threeChildren[0].name !== \"\" && childrenNumber === \"Three or more children\" &&\n \n \n are my grand children \n \n }\n {\n threeGrandChildren[0].name !== \"\" && grandChildrenNumber === \"Three or more grand children\" &&\n \n )\n}\n\nexport default IsMaoriPepehaToPrintUi;","import React from 'react';\nimport { Document, View, Page, Font, Image, Text, StyleSheet } from '@react-pdf/renderer';\nimport fontMedium from '../../fonts/Poppins-Medium.ttf'\nimport fontRegular from '../../fonts/Poppins-Regular.ttf'\n\nimport {\n sMother,\n sFather,\n sPartner,\n sChild,\n sTwoChildren,\n sMaternalGrandFather,\n sMaternalGrandMother,\n sPaternalGrandFather,\n sPaternalGrandMother,\n sGrandChild,\n sTwoGrandChildren,\n} from './WhakapapaSentences'\n\nFont.register({ family: 'PoppinsMedium', src: fontMedium })\nFont.register({ family: 'PoppinsRegular', src: fontRegular })\n\n// styling guide https://react-pdf.org/styling\nconst stylesLight = StyleSheet.create({\n page: {\n backgroundColor: 'white',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n section: {\n color: '#2D373C',\n borderTopLeftRadius: 6,\n borderTopRightRadius: 6,\n borderBottomRightRadius: 6,\n borderBottomLeftRadius: 6,\n textAlign: 'center',\n margin: 30,\n width: 500\n },\n maori_text: {\n fontSize: 12,\n fontFamily: 'PoppinsMedium'\n },\n eng_text: {\n fontSize: 10,\n fontFamily: 'PoppinsRegular',\n marginBottom: 12,\n },\n image_container: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n marginBottom: 50,\n },\n image: {\n width: 221,\n height: 70\n }\n});\n\nconst stylesDark = StyleSheet.create({\n page: {\n backgroundColor: 'black',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n section: {\n color: 'white',\n borderTopLeftRadius: 6,\n borderTopRightRadius: 6,\n borderBottomRightRadius: 6,\n borderBottomLeftRadius: 6,\n textAlign: 'center',\n margin: 30,\n width: 500\n },\n maori_text: {\n fontSize: 12,\n fontFamily: 'PoppinsMedium'\n },\n eng_text: {\n fontSize: 10,\n fontFamily: 'PoppinsRegular',\n marginBottom: 12,\n },\n image_container: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n marginBottom: 50,\n },\n image: {\n width: 221,\n height: 70\n }\n});\n\nconst MaoriText = ({ text, toPrintTheme }) => {text} \nconst EngText = ({ text, toPrintTheme }) => {text} \n\nconst ThreeChildren = ({ inputValueThreeChildren, toPrintTheme }) => {\n\n return (\n <>\n {`Ko ${inputValueThreeChildren[0].name || \"...\"} rātou`} \n {` ${inputValueThreeChildren[0].name || \"...\"}`} \n {inputValueThreeChildren.map((element, index) => {\n if (index > 0) return (\n \n {`Ko ${element.name || \"...\"}`} \n {`${element.name || \"...\"}`} \n
\n )\n\n\n })}\n aku tamariki \n are my children \n \n )\n}\nconst ThreeGrandChildren = ({ inputValueThreeGrandChildren, toPrintTheme }) => {\n\n return (\n <>\n {`Ko ${inputValueThreeGrandChildren[0].name || \"...\"} rātou`} \n {` ${inputValueThreeGrandChildren[0].name || \"...\"}`} \n {inputValueThreeGrandChildren.map((element, index) => {\n if (index > 0) return (\n \n {`Ko ${element.name || \"...\"}`} \n {`${element.name || \"...\"}`} \n
\n )\n\n\n })}\n aku mokopuna \n are my grand children \n \n )\n}\n\nconst IsMaoriPepehaToPrint = ({\n mother,\n father,\n partner,\n child,\n twoChildren,\n threeChildren,\n maternalGrandFather,\n maternalGrandMother,\n paternalGrandFather,\n paternalGrandMother,\n toPrintTheme,\n grandChild,\n twoGrandChildren,\n threeGrandChildren,\n grandChildrenNumber,\n childrenNumber,\n}) => (\n \n \n \n \n {\n toPrintTheme ?\n \n {(maternalGrandFather !== \"\") && (maternalGrandMother !== \"\") &&\n <>\n \n \n \n);\n\nexport default IsMaoriPepehaToPrint;","import React from 'react';\nimport { Link } from 'react-router-dom'\nimport styled from 'styled-components'\nimport Title from '../Title'\nimport Button from '../Button';\n\nconst Container = styled.div`\n text-align: center;\n width: 380px;\n margin: 0 20px;\n padding: 35px 50px;\n\n border-radius: 10px; \n opacity: 1;\n background: #FFFFFF80 0% 0% no-repeat padding-box;\n box-shadow: inset 0px 3px 6px #00000029;\n backdrop-filter: blur(3px);\n -webkit-backdrop-filter: blur(3px);\n\n @media only screen and (min-width: 768px) {\n padding: 50px 135px;\n }\n`;\n\nconst Text = styled.p`\n font-size: 12px;\n margin: -25px 0 30px 0;\n\n @media only screen and (min-width: 768px) {\n font-size: 18px;\n }\n\n @media only screen and (min-width: 1200px) {\n font-size: 20px;\n }\n`;\n\nconst InputStyled = styled.input`\nfont-size: 18;\n background: white;\n border: 1px solid #B2B2B2;\n border-radius: 6px;\n color: #2D373C;\n font-family: RegularFont;\n font-size: 18;\n margin: 10px 0;\n padding: 15px;\n width: 349px;\n`;\n\nconst InputQuestionTwoChildren = ({\n path,\n imgSrc,\n title,\n text,\n inputValueTwoChildren,\n setInputValueTwoChildren\n}) => {\n\n let handleChange = (i, e) => {\n let newFormValues = [...inputValueTwoChildren];\n newFormValues[i][e.target.name] = e.target.value;\n setInputValueTwoChildren(newFormValues);\n }\n\n return (\n\n \n {text} \n\n {inputValueTwoChildren.map((element, index) => (\n \n handleChange(index, e)}\n placeholder=\"Insert name\"\n />\n
\n ))}\n\n \n )\n}\n\nexport default InputQuestionTwoChildren;","import React from 'react';\nimport { Link } from 'react-router-dom'\nimport styled from 'styled-components'\nimport Button from '../Button';\n\nconst Container = styled.div`\n text-align: center;\n width: 380px;\n margin: 0 20px 50px;\n padding: 35px 50px;\n\n border-radius: 10px; \n opacity: 1;\n background: #FFFFFF80 0% 0% no-repeat padding-box;\n box-shadow: inset 0px 3px 6px #00000029;\n backdrop-filter: blur(3px);\n -webkit-backdrop-filter: blur(3px);\n\n @media only screen and (min-width: 768px) {\n padding: 50px 135px;\n }\n`;\n\n\nconst TitleStyled = styled.h1`\n font-size: 20px;\n\n @media only screen and (min-width: 768px) {\n font-size: 30px;\n }\n\n @media only screen and (min-width: 1200px) {\n font-size: 30px;\n }\n`;\n\nconst Text = styled.p`\n font-size: 12px;\n margin: -25px 0 30px 0;\n\n @media only screen and (min-width: 768px) {\n font-size: 18px;\n }\n\n @media only screen and (min-width: 1200px) {\n font-size: 20px;\n }\n`;\n\nconst InputStyled = styled.input`\nfont-size: 18;\n background: white;\n border: 1px solid #B2B2B2;\n border-radius: 6px;\n color: #2D373C;\n font-family: RegularFont;\n font-size: 18;\n margin: 10px 0;\n padding: 15px;\n width: 349px;\n`;\n\nconst RemoveInput = styled.p`\n color: #5c9021;\n cursor: pointer;\n float: right;\n margin-top: -5px;\n`;\n\nconst AddInput = styled.p`\n color: #5c9021;\n cursor: pointer;\n font-family: SemiBoldFont;\n margin-top: 30px;\n`;\n\n\n\nconst InputQuestionTwoChildren = ({\n path,\n imgSrc,\n inputValueThreeChildren,\n setInputValueThreeChildren\n}) => {\n\n let handleChange = (i, e) => {\n let newFormValues = [...inputValueThreeChildren];\n newFormValues[i][e.target.name] = e.target.value;\n setInputValueThreeChildren(newFormValues);\n }\n\n let addFormFields = () => {\n setInputValueThreeChildren([...inputValueThreeChildren, { name: \"\" }])\n }\n\n let removeFormFields = (i) => {\n let newFormValues = [...inputValueThreeChildren];\n newFormValues.splice(i, 1);\n setInputValueThreeChildren(newFormValues)\n }\n\n return (\n \n {`Ko ${inputValueThreeChildren[0].name || \"...\"} rātou`} \n {`My children are ${inputValueThreeChildren[0].name || \"...\"} and`} \n {inputValueThreeChildren.map((element, index) => {\n if (index > 0) return (\n \n {`Ko ${element.name || \"...\"}`} \n {`${element.name || \"...\"}`} \n
\n )\n })}\n\n {inputValueThreeChildren.map((element, index) => (\n \n handleChange(index, e)} placeholder=\"Insert name\" />\n {\n index > 2 ?\n removeFormFields(index)}>X Remove field \n : null\n }\n
\n ))}\n \n
addFormFields()}>+ Add one more field \n
\n )\n}\n\n\nexport default InputQuestionTwoChildren;","import React, { useEffect, useState } from 'react';\nimport { Link } from 'react-router-dom'\nimport styled from 'styled-components'\nimport Title from '../Title'\nimport Button from '../Button';\nimport ButtonOption from '../ButtonOption';\nimport ErrorMessage from '../ErrorMessage';\n\nconst ContainerOut = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n`;\n\nconst Container = styled.div`\n text-align: center;\n width: 380px;\n padding: 35px 50px;\n\n border-radius: 10px; \n opacity: 1;\n background: #FFFFFF80 0% 0% no-repeat padding-box;\n box-shadow: inset 0px 3px 6px #00000029;\n backdrop-filter: blur(3px);\n -webkit-backdrop-filter: blur(3px);\n\n @media only screen and (min-width: 768px) {\n padding: 50px 135px;\n }\n`;\n\nconst ChildrenNumber = ({ state, setState }) => {\n const [showError, setShowError] = useState(false)\n const [view, setView] = useState(\"\")\n useEffect(() => {\n if (view == \"\"){\n if (state == \"None\"){\n setView(\"8.5\")\n }else if (state == \"One child\"){\n setView(\"8\")\n }else if (state == \"Two children\"){\n setView(\"9\")\n }else if (state == \"Three or children\"){\n setView(\"10\")\n }\n }\n })\n return (\n \n \n setView(\"8.5\")}>\n
\n\n setView(\"8\")}>\n
\n\n setView(\"9\")}>\n
\n\n setView(\"10\")}>\n
\n\n {showError && setShowError(true)}>\n
\n :\n \n \n )\n}\n\nexport default ChildrenNumber;","import React, { useEffect, useState } from 'react';\nimport { Link } from 'react-router-dom'\nimport styled from 'styled-components'\nimport Title from '../Title'\nimport Button from '../Button';\nimport ButtonOption from '../ButtonOption';\nimport ErrorMessage from '../ErrorMessage';\n\nconst ContainerOut = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n`;\n\nconst Container = styled.div`\n text-align: center;\n width: 380px;\n padding: 35px 50px;\n\n border-radius: 10px; \n opacity: 1;\n background: #FFFFFF80 0% 0% no-repeat padding-box;\n box-shadow: inset 0px 3px 6px #00000029;\n backdrop-filter: blur(3px);\n -webkit-backdrop-filter: blur(3px);\n\n @media only screen and (min-width: 768px) {\n padding: 50px 135px;\n }\n`;\n\nconst GrandChildrenNumber = ({ state, setState }) => {\n const [showError, setShowError] = useState(false)\n const [view, setView] = useState(\"\")\n useEffect(() => {\n if (view == \"\") {\n if (state == \"None\") {\n setView(\"14\")\n } else if (state == \"One grand child\") {\n setView(\"~\")\n } else if (state == \"Two grand children\") {\n setView(\"12\")\n } else if (state == \"Three or more grand children\") {\n setView(\"13\")\n }\n }\n })\n return (\n \n \n setView(\"14\")}>\n
\n\n setView(\"11\")}>\n
\n\n setView(\"12\")}>\n
\n\n setView(\"13\")}>\n
\n\n {showError && setShowError(true)}>\n
\n :\n \n \n )\n}\n\nexport default GrandChildrenNumber;","import React from 'react';\nimport { Link } from 'react-router-dom'\nimport styled from 'styled-components'\nimport Title from '../Title'\nimport Button from '../Button';\n\nconst Container = styled.div`\n text-align: center;\n width: 380px;\n margin: 0 20px;\n padding: 35px 50px;\n\n border-radius: 10px; \n opacity: 1;\n background: #FFFFFF80 0% 0% no-repeat padding-box;\n box-shadow: inset 0px 3px 6px #00000029;\n backdrop-filter: blur(3px);\n -webkit-backdrop-filter: blur(3px);\n\n @media only screen and (min-width: 768px) {\n padding: 50px 135px;\n }\n`;\n\nconst Text = styled.p`\n font-size: 12px;\n margin: -25px 0 30px 0;\n\n @media only screen and (min-width: 768px) {\n font-size: 18px;\n }\n\n @media only screen and (min-width: 1200px) {\n font-size: 20px;\n }\n`;\n\nconst InputStyled = styled.input`\nfont-size: 18;\n background: white;\n border: 1px solid #B2B2B2;\n border-radius: 6px;\n color: #2D373C;\n font-family: RegularFont;\n font-size: 18;\n margin: 10px 0;\n padding: 15px;\n width: 349px;\n`;\n\nconst InputQuestionTwoGrandChildren = ({\n path,\n imgSrc,\n title,\n text,\n inputValueTwoGrandChildren,\n setInputValueTwoGrandChildren\n}) => {\n\n let handleChange = (i, e) => {\n let newFormValues = [...inputValueTwoGrandChildren];\n newFormValues[i][e.target.name] = e.target.value;\n setInputValueTwoGrandChildren(newFormValues);\n }\n\n return (\n\n \n {text} \n\n {inputValueTwoGrandChildren.map((element, index) => (\n \n handleChange(index, e)}\n placeholder=\"Insert name\"\n />\n
\n ))}\n\n \n )\n}\n\nexport default InputQuestionTwoGrandChildren;","import React from 'react'\nimport styled from 'styled-components'\nimport { Link } from 'react-router-dom'\nimport Button from '../Button';\n\n\nconst Container = styled.div`\n text-align: center;\n width: 380px;\n margin: 0 20px 50px;\n padding: 35px 50px;\n\n border-radius: 10px; \n opacity: 1;\n background: #FFFFFF80 0% 0% no-repeat padding-box;\n box-shadow: inset 0px 3px 6px #00000029;\n backdrop-filter: blur(3px);\n -webkit-backdrop-filter: blur(3px);\n\n @media only screen and (min-width: 768px) {\n padding: 50px 135px;\n }\n`;\n\n\nconst TitleStyled = styled.h1`\n font-size: 20px;\n\n @media only screen and (min-width: 768px) {\n font-size: 30px;\n }\n\n @media only screen and (min-width: 1200px) {\n font-size: 30px;\n }\n`;\n\nconst Text = styled.p`\n font-size: 12px;\n margin: -25px 0 30px 0;\n\n @media only screen and (min-width: 768px) {\n font-size: 18px;\n }\n\n @media only screen and (min-width: 1200px) {\n font-size: 20px;\n }\n`;\n\nconst InputStyled = styled.input`\nfont-size: 18;\n background: white;\n border: 1px solid #B2B2B2;\n border-radius: 6px;\n color: #2D373C;\n font-family: RegularFont;\n font-size: 18;\n margin: 10px 0;\n padding: 15px;\n width: 349px;\n`;\n\nconst RemoveInput = styled.p`\n color: #5c9021;\n cursor: pointer;\n float: right;\n margin-top: -5px;\n`;\n\nconst AddInput = styled.p`\n color: #5c9021;\n cursor: pointer;\n font-family: SemiBoldFont;\n margin-top: 30px;\n`;\n\nconst InputQuestionThreeGrandChildren = ({\n path,\n imgSrc,\n inputValueThreeGrandChildren,\n setInputValueThreeGrandChildren\n}) => {\n let handleChange = (i, e) => {\n let newFormValues = [...inputValueThreeGrandChildren];\n newFormValues[i][e.target.name] = e.target.value;\n setInputValueThreeGrandChildren(newFormValues);\n }\n\n let addFormFields = () => {\n setInputValueThreeGrandChildren([...inputValueThreeGrandChildren, { name: \"\" }])\n }\n\n let removeFormFields = (i) => {\n let newFormValues = [...inputValueThreeGrandChildren];\n newFormValues.splice(i, 1);\n setInputValueThreeGrandChildren(newFormValues)\n }\n return (\n \n {`Ko ${inputValueThreeGrandChildren[0].name || \"...\"} rātou`} \n {`My grand children are ${inputValueThreeGrandChildren[0].name || \"...\"} and`} \n {inputValueThreeGrandChildren.map((element, index) => {\n if (index > 0) return (\n \n {`Ko ${element.name || \"...\"}`} \n {`${element.name || \"...\"}`} \n
\n )\n\n\n })}\n {/* aku tamariki \n are my children */}\n\n\n {inputValueThreeGrandChildren.map((element, index) => (\n \n\n handleChange(index, e)} placeholder=\"Insert name\" />\n {\n index > 2 ?\n removeFormFields(index)}>X Remove field \n : null\n }\n
\n ))}\n \n
addFormFields()}>+ Add one more field \n\n
\n )\n}\n\nexport default InputQuestionThreeGrandChildren","import React, { useState } from 'react';\nimport { Link, useParams, useHistory } from 'react-router-dom';\nimport styled from 'styled-components'\nimport InputQuestion from '../InputQuestion';\nimport SectionToPrint from '../SectionToPrint'\nimport WhakapapaToPrintUi from './WhakapapaToPrintUi';\nimport WhakapapaToPrint from './WhakapapaToPrint';\nimport ExportToPDFButton from '../ExportToPDFButton';\nimport PopUpLoading from '../PopUpLoading';\nimport Button from '../Button';\nimport InputQuestionTwoChildren from './InputQuestionTwoChildren';\nimport InputQuestionThreeChildren from './InputQuestionThreeChildren';\nimport ChildrenNumber from './ChildrenNumber'\nimport {\n sMother,\n sFather,\n sPartner,\n sChild,\n sTwoChildren,\n sMaternalGrandFather,\n sMaternalGrandMother,\n sPaternalGrandFather,\n sPaternalGrandMother,\n sGrandChild,\n sTwoGrandChildren,\n} from './WhakapapaSentences'\nimport GrandChildrenNumber from './GrandChildrenNumber';\nimport InputQuestionTwoGrandChildren from './InputQuestionTwoGrandChildren';\nimport InputQuestionThreeGrandChildren from './InputQuestionThreeGrandChildren';\n\nconst ContainerToPrint = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n`;\n\nconst ContainerOut = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: center;\n margin-top: 100px;\n align-items: center;\n`;\n\nconst ContainerIn = styled.div`\n width: 100%\n\n @media only screen and (min-width: 768px) {\n width: 400px;\n }\n`;\n\nconst ToPrintContainer = styled.div`\n width: 90%;\n\n @media only screen and (min-width: 768px) {\n width: 600px;\n }\n`;\n\nconst WhakapapaFlow = (\n {\n inputValueMother,\n setInputStateMother,\n inputValueFather,\n setInputStateFather,\n inputValuePartner,\n setInputStatePartner,\n\n inputValueChild,\n setInputValueChild,\n inputValueGrandChild,\n setInputValueGrandChild,\n\n inputValueTwoChildren,\n setInputValueTwoChildren,\n inputValueTwoGrandChildren,\n setInputValueTwoGrandChildren,\n\n inputValueThreeChildren,\n setInputValueThreeChildren,\n inputValueThreeGrandChildren,\n setInputValueThreeGrandChildren,\n\n inputValueMaternalGrandFather,\n setInputValueMaternalGrandFather,\n inputValueMaternalGrandMother,\n setInputValueMaternalGrandMother,\n inputValuePaternalGrandFather,\n setInputValuePaternalGrandFather,\n inputValuePaternalGrandMother,\n setInputValuePaternalGrandMother,\n\n childrenNumber,\n setChildrenNumber,\n grandChildrenNumber,\n setGrandChildrenNumber,\n }\n) => {\n let { flow } = useParams()\n let history = useHistory()\n const [toPrintTheme, setToPrintTheme] = useState(true)\n // const [childrenNumber, setChildrenNumber] = useState(true)\n const clearHistory = function () {\n setInputStateMother(\"\")\n setInputStateFather(\"\")\n setInputStatePartner(\"\")\n setInputValueChild(\"\")\n setInputValueGrandChild(\"\")\n setInputValueMaternalGrandFather(\"\")\n setInputValueMaternalGrandMother(\"\")\n setInputValuePaternalGrandFather(\"\")\n setInputValuePaternalGrandMother(\"\")\n setInputValueChild(\"\")\n setInputValueGrandChild(\"\")\n setInputValueTwoChildren(\"\")\n setInputValueTwoGrandChildren(\"\")\n setInputValueThreeChildren(\"\")\n setInputValueThreeGrandChildren(\"\")\n setChildrenNumber(\"\")\n }\n\n return (\n \n
\n {\n flow === \"15\" &&\n \n \n }\n \n {\n flow <= 14 &&\n
\n \n {\n flow === \"1\" &&\n \n \n }\n\n
\n
What is whakapapa? \n
\n Whakapapa is used to represent whānau relationships, who your whānau is and how you are all related. Simply select the sections that are relevant to you and your whānau.\n When you're finished your whakapapa will be available for you to view on this device, nō reira, toru, whā, KARAWHIUA!'\n
\n
setShowPopUp(false)}>\n
\n
\n \n {\n whakapapaView === \"0\" &&\n \n \n }\n \n \n\n\n {\n whakapapaView === \"1\" &&\n\n \n\n \n\n }\n \n )\n }\n\n}\n\nexport default Whakapapa;","import React from 'react';\nimport styled from 'styled-components'\n\nconst LettersContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: center;\n\n @media only screen and (min-width: 768px) {\n \n }\n`;\n\nconst Letters = styled.p`\n cursor: pointer;\n color: ${props => props.color || \"#22170F\"};\n font-family: MediumFont;\n font-size: 1.5rem;\n margin-right: 15px;\n\n @media only screen and (min-width: 768px) {\n font-size: 1.8rem;\n }\n @media only screen and (min-width: 850px) {\n font-size: 1rem;\n }\n`;\n\nconst LetterButton = ({ active, setActive, letter }) => {\n return (\n setActive(letter)}>\n {letter} \n
\n )\n}\n\n\nconst AbcMenu = ({ active, setActive }) => {\n\n return (\n\n \n \n\n )\n}\n\nexport default AbcMenu;","import React from 'react';\nimport styled from 'styled-components'\n\nconst SubTitleStyled = styled.p`\n margin-top: -20px;\n color: #AE0F0B;\n`;\n\n\nconst SubTitle = ({ subtitle }) => {\n return {subtitle} \n}\n\nexport default SubTitle;","import React, { useState, useEffect } from \"react\";\nimport styled from 'styled-components'\n\nconst Word = styled.p`\n cursor: pointer;\n font-size: 26px;\n font-family: SemiBoldFont;\n`;\n\nconst useAudio = url => {\n const [audio] = useState(new Audio(url));\n const [playing, setPlaying] = useState(false);\n\n const toggle = () => setPlaying(!playing);\n\n useEffect(() => {\n playing ? audio.play() : audio.pause();\n },\n [playing]\n );\n\n useEffect(() => {\n audio.addEventListener('ended', () => setPlaying(false));\n return () => {\n audio.removeEventListener('ended', () => setPlaying(false));\n };\n }, []);\n\n return [playing, toggle];\n};\n\n\nconst ButtonTapPlayGlossary = ({ url, text }) => {\n const [playing, toggle] = useAudio(url);\n\n return (\n !playing ? {text} \n :\n {text} \n )\n}\n\nexport default ButtonTapPlayGlossary;","import React from 'react';\nimport styled from 'styled-components'\n\nconst TranslationStyled = styled.p`\n margin: -20px 0 30px 0;\n`;\n\n\nconst Translation = ({ text }) => {\n return {text} \n}\n\nexport default Translation;","import React from 'react';\nimport styled from 'styled-components'\nimport ButtonTapPlayGlossary from '../ButtonTapPlayGlossary';\nimport Translation from './Translation';\nimport S3Url from './S3Url';\n\nconst WordContainerStyled = styled.div`\n border-bottom: ${props => props.borderBottom || \"none\"};\n border-top: 1px solid #B2B2B2;\n\n @media only screen and (min-width: 768px) {\n \n }\n`;\n\nconst WordContainer = ({ text, file, translation, border }) => {\n\n return (\n \n \n )\n}\n\nexport default WordContainer;","const S3Url = \"https://westpac-bucket.s3.ap-southeast-2.amazonaws.com/glossary/\"\n\nexport default S3Url","import React from 'react';\nimport WordContainer from './WordContainer';\n\nconst A = ({ active }) => {\n\n return (\n active === \"a\" &&\n \n
\n )\n}\n\nexport default A;","import React from 'react';\nimport WordContainer from './WordContainer';\n\nconst E = ({ active }) => {\n\n return (\n active === \"e\" &&\n \n {/*
\n )\n}\n\nexport default E;","import React from 'react';\nimport WordContainer from './WordContainer';\n\nconst H = ({ active }) => {\n\n return (\n active === \"h\" &&\n \n
\n )\n}\n\nexport default H;","import React from 'react';\nimport WordContainer from './WordContainer';\n\nconst I = ({ active }) => {\n\n return (\n active === \"i\" &&\n \n {/*
\n )\n}\n\nexport default I;","import React from 'react';\nimport WordContainer from './WordContainer';\n\nconst K = ({ active }) => {\n\n return (\n active === \"k\" &&\n \n
\n )\n}\n\nexport default K;","import React from 'react';\nimport WordContainer from './WordContainer';\n\nconst M = ({ active }) => {\n\n return (\n active === \"m\" &&\n \n {/*
\n )\n}\n\nexport default M;","import React from 'react';\nimport WordContainer from './WordContainer';\n\nconst N = ({ active }) => {\n\n return (\n active === \"n\" &&\n \n
\n )\n}\n\nexport default N;","import React from 'react';\nimport WordContainer from './WordContainer';\n\nconst O = ({ active }) => {\n\n return (\n active === \"o\" &&\n \n
\n )\n}\n\nexport default O;","import React from 'react';\nimport WordContainer from './WordContainer';\n\nconst P = ({ active }) => {\n\n return (\n active === \"p\" &&\n \n
\n )\n}\n\nexport default P;","import React from 'react';\nimport WordContainer from './WordContainer';\n\nconst R = ({ active }) => {\n\n return (\n active === \"r\" &&\n \n
\n )\n}\n\nexport default R;","import React from 'react';\nimport WordContainer from './WordContainer';\n\nconst T = ({ active }) => {\n\n return (\n active === \"t\" &&\n \n
\n )\n}\n\nexport default T;","import React from 'react';\nimport WordContainer from './WordContainer';\n\nconst W = ({ active }) => {\n\n return (\n active === \"w\" &&\n \n
\n )\n}\n\nexport default W;","import React, { useEffect, useState } from 'react';\nimport { Analytics } from 'aws-amplify'\nimport styled from 'styled-components'\nimport AbcMenu from '../components/Glossary/AbcMenu';\nimport SubTitle from '../components/SubTitle'\nimport A from '../components/Glossary/A'\nimport E from '../components/Glossary/E'\nimport H from '../components/Glossary/H'\nimport I from '../components/Glossary/I'\nimport K from '../components/Glossary/K'\nimport M from '../components/Glossary/M'\nimport N from '../components/Glossary/N'\nimport O from '../components/Glossary/O'\nimport P from '../components/Glossary/P'\nimport R from '../components/Glossary/R'\nimport T from '../components/Glossary/T'\nimport W from '../components/Glossary/W'\n\nconst IntroContainer = styled.div`\n // @media only screen and (min-width: 1200px) {\n // display: flex;\n // flex-direction: column;\n // justify-content: center;\n // align-items: center;\n // height: 90vh;\n // }\n height: 100%;\n width: 560px;\n /* UI Properties */\n background: #FFFFFF80 0% 0% no-repeat padding-box;\n box-shadow: inset 0px 3px 6px #00000029;\n border-radius: 30px;\n opacity: 1;\n backdrop-filter: blur(30px);\n -webkit-backdrop-filter: blur(30px);\n margin: auto auto 0;\n @media only screen and (max-width: 650px) {\n width: 80%;\n }\n @media only screen and (min-width: 850px) {\n width: 40%;\n }\n\n`;\n\nconst ContentOutContainer = styled.div`\n margin-top: 50px;\n display: flex;\n flex-direction: row;\n justify-content: center;\n`;\n\nconst ContentInContainer = styled.div`\n text-align: center;\n`;\n\nconst Title = styled.h1`\n margin-top: 50px;\n font-size: 26px;\n\n @media only screen and (min-width: 768px) {\n font-size: 36px;\n }\n`;\n\nconst TextContainer = styled.div`\n // margin: 20px 20px 80px 20px;\n\n @media only screen and (min-width: 768px) {\n width: 100%;\n }\n`;\n\nconst Glossary = () => {\n const [active, setActive] = useState(\"a\")\n\n useEffect(() => {\n Analytics.record({\n name: \"Glossary page visit\"\n })\n }, [])\n\n return (\n \n \n \n Kupu taka \n \n
}\n {active === \"r\" && \n \n \n \n )\n}\n\nexport default Glossary;","import React from 'react'\nimport styled from 'styled-components'\n\nconst ImageContainer = styled.div`\n width: 100%;\n background-color: #fff;\n display: flex;\n justify-content: center;\n align-items: center;\n`\nconst Image = styled.img`\n width: auto;\n display: block;\n margin: 0 auto;\n padding: 5rem 0;\n height: 350px;\n @media screen and (max-width: 600px) {\n width: 70%;\n height: 70%;\n}\n`\nconst TableSection = styled.div`\npadding: 50px 0;\nalign-items: center;\njustify-content: center;\ndisplay: flex;\n\n@media screen and (max-width: 1024px) {\n height: auto;\n}\n`\nconst TableContent = styled.div`\ndisplay: flex;\nalign-items: center;\nbackground: #ffffff80 0% 0% no-repeat padding-box;\nbackground-color: #ababab;\njustify-content: center;\nwidth: 70%;\nmargin: 0 auto;\npadding: 1rem 0;\n\n@media screen and (max-width: 900px){\n width: 100%;\n}\n@media screen and (max-width: 600px) {\n display: none;\n}\n@media screen and (max-width: 1024px) {\n width: 100%;\n}\n`\nconst Container = styled.div`\nwidth: 100%;\n`\nconst Table = styled.table`\nwidth: 100%;\nborder-collapse: collapse;\nborder-radius: 0.5rem;\n\n@media screen and (max-width: 900px) {\n width: 100%;\n margin: 0 2rem;\n}\n@media screen and (max-width: 600px) {\n width: 100%;\n padding: 0;\n}\n@media screen and (max-width: 1024px) {\n width: 100%;\n margin: 0 2rem;\n}\n`\nconst THead = styled.thead`\n@media screen and (max-width: 600px) {\n display: none;\n}\n`\nconst TH = styled.th`\npadding: 1rem 1.5rem;\nborder: 3px solid #ffffff;\nbox-shadow: 0 0 10px #ffffff;\nalign-items: center;\njustify-content: center;\ncolor: #000;\nfont-weight: bold;\n@media screen and (max-width: 1024px) {\n padding:10px;\n font-size: 0.8rem;\n}\n@media screen and (max-width: 600px) {\n padding: 10px;\n font - size: 0.6rem;\n}\n`\n\nconst TD = styled.td`\npadding: 1rem 1.5rem;\nborder: 3px solid #ffffff;\nbox-shadow: 0 0 10px #ffffff;\nalign-items: center;\njustify-content: center;\ncolor: #000;\nfont-weight: bold;\n\n@media screen and (max-width: 1024px) {\n position: relative;\n font-size: 0.8rem;\n padding:10px;\n}\n\n@media screen and (max-width: 600px){\n display: flex;\n justify-content: start;\n position: relative;\n font - size: 0.6rem;\n padding: 10px;\n}\n`\nconst BoxesContaier = styled.div`\n display: none;\n @media screen and (max-width: 600px) {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n background: #ffffff80 0% 0% no-repeat padding-box;\n background-color: #ababab;\n width: 100%;\n padding: 1rem 0;\n margin: 0 auto;\n}\n`\nconst BoxesRow = styled.div`\n width: 95%;\n margin: 1.5rem auto 0;\n`\nconst Box = styled.div`\n margin: 0.2rem 0;\n padding: 0.2rem 1rem;\n border: 3px solid #ffffff;\n box-shadow: 0 0 10px #ffffff;\n align-items: center;\n justify-content: center;\n`\nconst BoxHead = styled.p`\n color: red;\n line-height: 1.8;\n font-size: 0.8rem;\n font-weight: bolder;\n`\nconst BoxText = styled.p`\n color: #000;\n line-height: 1.8;\n font-size: 0.8rem;\n font-weight: bolder;\n`\n\nconst Framewrok = () => {\n return (\n <>\n \n \n \n \n {/* desktop and tablet */}\n \n \n \n Māori values \n Pono \n Tika \n Aroha \n \n \n \n Description \n \n Fact, truth, reality, integrity\n \n \n Act accordingly, appropriate action, ethical expression\n \n \n Empathy, care, compassion, passion\n \n \n \n In action \n \n We're truthful, honest, and sincere in our interactions with others. Our integrity acknowledges and accepts there can be differing interpretations of the same fact or event. Pono helps us to navigate this space\n \n \n Tika is a physical manifestation of pono. We express ourselves in accordance with what we believe is the right thing to do.\n Ethical expression considers the consequences of all affected by the action\n \n \n Aroha determines how pono and tika are expressed and received. If pono is the why, and tika is the what, aroha is the how. The desired outcome of aroha is to ensure mana and relationships are not diminished\n \n \n \n Desired outcome \n \n To communicate clearly with integrity and purpose\n \n \n Any action is considered and appropriate\n \n \n Mana is restored, intact or enhanced\n \n \n \n
\n \n {/* mobile */}\n \n \n \n \n Pono\n \n \n \n \n Fact, truth, reality, integrity\n \n \n \n \n Act accordingly, appropriate action, ethical expression\n \n \n \n \n Empathy, care, compassion, passion\n \n \n \n \n \n \n Tika\n \n \n \n \n We're truthful, honest, and sincere in our interactions with others. Our integrity acknowledges and accepts there can be differing interpretations of the same fact or event. Pono helps us to navigate this space\n \n \n \n \n Tika is a physical manifestation of pono. We express ourselves in accordance with what we believe is the right thing to do.\n Ethical expression considers the consequences of all affected by the action\n \n \n \n \n Aroha determines how pono and tika are expressed and received. If pono is the why, and tika is the what, aroha is the how. The desired outcome of aroha is to ensure mana and relationships are not diminished\n \n \n \n \n \n \n Aroha\n \n \n \n \n To communicate clearly with integrity and purpose\n \n \n \n \n Any action is considered and appropriate\n \n \n \n \n Mana is restored, intact or enhanced\n \n \n \n \n \n \n \n )\n}\n\nexport default Framewrok","import React, { useEffect } from 'react';\nimport { Analytics } from 'aws-amplify'\nimport styled from 'styled-components'\nimport Title from '../components/Title'\nimport SubTitle from '../components/SubTitle'\nimport Image from '../components/Image'\n\n\nconst ContainerAnima = styled.div`\n background-color: #435A36;\n height: 100vh;\n position: fixed;\n width: 100%;\n overflow-y: scroll;\n background-blend-mode: screen;\n // opacity: 0.5;\n background-image: url(/img/bg-1.png);\n background-position: left;\n background-size: cover;\n`;\nconst Container = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: center;\n padding: 75px 0 25px;\n align-items: center;\n @media only screen and (min-width: 1000px) {\n padding: 125px 0 25px;\n }\n`;\nconst ContentContainer = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n text-align: center;\n`;\nconst ContentOutContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: center;\n`;\n\nconst ContentInContainer = styled.div`\n margin-top: 40px;\n text-align: center;\n`;\n\n\nconst TextContainer = styled.div`\n margin: 20px 20px 80px 20px;\n\n @media only screen and (min-width: 650px) {\n width: 520px;\n }\n`;\n\nconst CustomLink = styled.a`\n color: blue;\n text-decoration: underline;\n display: inline-block;\n margin: 0 0.2rem;\n`;\n\nconst TextValues = styled.p`\n font-size: 12px;\n text-align: justify;\n @media only screen and (min-width: 768px) {\n font-size: 18px;\n }\n`;\nconst TextBold = styled.p`\n font-weight: bold;\n`;\n\nconst AboutPageBox = styled.div`\nleft: 543px;\nwidth: 700px;\nmargin:auto; \n/* UI Properties */\nbackground: #FFFFFF80 0% 0% no-repeat padding-box;\nbox-shadow: inset 0px 3px 6px #00000029;\nborder-radius: 30px;\nopacity: 1;\nbackdrop-filter: blur(30px);\n-webkit-backdrop-filter: blur(30px);\n@media only screen and (min-width: 415px) and (max-width: 650px) {\n margin: auto;\n ${'' /* height: 950px; */}\n margin-bottom: 30px;\n width: 80%;\n}\n@media only screen and (max-width: 414px) {\n margin: auto;\n ${'' /* height: 550px; */}\n margin-bottom: 30px;\n width: 80%;\n}\n`\n\nconst About = () => {\n\n useEffect(() => {\n Analytics.record({\n name: \"About page visit\"\n })\n }, [])\n\n return (\n \n\n \n\n \n \n \n */}\n \n \n \n \n Tupukupu is a user-friendly and enjoyable app designed to assist learners in building a mihi, pepeha or whakapapa statements, and incorporating everyday te reo Māori language into their interactions. Like many language resources, Tupukupu is a tool designed to complement and support in-class reo lessons.\n\n This app does not collect or store any user data on external servers. All data is processed locally on your device and is stored only on your browser or phone. We do not have access to, nor do we retain, any personal information. \n \n If you have any feedback on this application, follow this\n \n link\n .\n \n \n \n \n \n \n \n\n\n\n )\n}\n\nexport default About;","import React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components'\n\nconst Button = styled.div`\n text-align: center;\n \n`;\n\nconst Icon = styled.img`\n height: 50px;\n width: 50px;\n background: #FFFFFF80 0% 0% no-repeat padding-box;\n // box-shadow: inset 0px 0px 20px var(--unnamed-color-ffffff), 0px 0px 20px var(--unnamed-color-ffffff);\n // box-shadow: inset 0px 0px 20px #FFFFFF, 0px 0px 20px #FFFFFF;\n border-radius: 65px;\n\n @media only screen and (max-width: 1280px) {\n height: 45px;\n width: 45px;\n }\n\n @media only screen and (max-width: 768px) {\n height: 40px;\n width: 40px;\n }\n`;\n\nconst ButtonText = styled.p`\n color: #000000;\n font-weight: 900;\n font-size: 13px;\n`;\n\nconst ButtonTextSpan = styled.p` \n color: #444;\n font-weight: 900;\n font-size: 12px;\n margin-top: -10px;\n\n`;\n\n\nconst ButtonMenu = ({ link, image, maoriText, engText }) => {\n return (\n\n \n {maoriText} \n {engText} \n \n \n\n )\n}\n\nexport default ButtonMenu;","import React, { useState } from 'react';\nimport { useLocation } from 'react-router-dom';\nimport styled from \"styled-components\"\nimport ButtonMenu from './ButtonMenu';\n\nconst MenuContainer = styled.div`\n margin: 15px 25px;\n display: flex;\n justify-content: center;\n align-items: center;\n // top: 18px;\n width: 40px;\n height: 40px;\n // left: 1782px;\n /* UI Properties */\n box-shadow: inset 0px 0px 20px var(--unnamed-color-ffffff), 0px 0px 20px var(--unnamed-color-ffffff);\n background: #FFFFFF80 0% 0% no-repeat padding-box;\n box-shadow: inset 0px 0px 20px #FFFFFF, 0px 0px 20px #FFFFFF;\n border-radius: 50%;\n opacity: 1;\n -webkit-backdrop-filter: blur(30px);\n`;\n\nconst Flex = styled.div`\n display: flex;\n flex-wrap: wrap;\n cursor: pointer;\n justify-content: center;\n flex-direction: row; \n`;\n\nconst MenuOpenContainer = styled.div`\n // background-color: #2D373C;\n padding-top: 75px;\n position: absolute;\n top: 0px;\n right: 0; \n width: 88%;\n z-index: -100;\n height: calc(100vh - 75px);\n\n /* UI Properties */\n background: #FFFFFF80 0% 0% no-repeat padding-box;\n box-shadow: inset 0px 3px 6px #00000029;\n border-radius: 65px 0px 0px 65px;\n opacity: 1;\n backdrop-filter: blur(30px);\n -webkit-backdrop-filter: blur(30px);\n\n @supports (-webkit-backdrop-filter: blur(30px)) {\n width: calc(100vw - 12%);\n }\n @media only screen and (min-width: 768px) {\n width: 345px;\n margin-left: -280px;\n }\n`;\n\nconst LinksContainer = styled.div`\n margin-bottom: 15px;\n width: 50%;\n @media only screen and (max-height: 900px) {\n width: 110px; \n }\n`;\n\nconst MenuImages = styled.img`\n cursor: pointer;\n // margin-top: 6px;\n // margin-left: 6px;\n // margin-right: 5px;\n width: 80%;\n`;\n\n\nconst Menu = () => {\n const [menuIsOpen, setMenuIsOpen] = useState(false)\n\n let location = useLocation()\n let path = location.pathname\n\n return (\n \n {\n !menuIsOpen ?\n <>\n {path === \"/\" ?\n\n setMenuIsOpen(!menuIsOpen)} src='/svg/menu-white.svg' alt=\"\" />\n :\n setMenuIsOpen(!menuIsOpen)} src='/svg/menu.svg' alt=\"\" />\n }\n \n :\n setMenuIsOpen(!menuIsOpen)} src='/svg/menu-close.svg' alt=\"\" />\n\n }\n\n {\n menuIsOpen &&\n\n \n \n setMenuIsOpen(!menuIsOpen)}>\n \n setMenuIsOpen(!menuIsOpen)}>\n \n setMenuIsOpen(!menuIsOpen)}>\n \n setMenuIsOpen(!menuIsOpen)}>\n \n setMenuIsOpen(!menuIsOpen)}>\n \n setMenuIsOpen(!menuIsOpen)}>\n \n setMenuIsOpen(!menuIsOpen)}>\n \n setMenuIsOpen(!menuIsOpen)}>\n \n setMenuIsOpen(!menuIsOpen)}>\n \n setMenuIsOpen(!menuIsOpen)}>\n \n setMenuIsOpen(!menuIsOpen)}>\n \n setMenuIsOpen(!menuIsOpen)}>\n \n\n \n \n }\n \n )\n}\n\nexport default Menu;","import React from 'react';\nimport { useLocation, useHistory } from 'react-router-dom'\nimport styled from 'styled-components'\nimport Menu from './Menu'\n\nconst TopBarCoontainer = styled.div`\n box-shadow: ${props => props.shadow};\n height: 55px;\n position: fixed;\n top: 0;\n right: 0;\n display: flex;\n flex-direction: row;\n justify-content: center;\n width: 100%;\n z-index: 999;\n`;\nconst LogoContainer = styled.div`\n width: 50px;\n margin: 15px 25px;\n @media only screen and (min-width: 768px) {\n width: 100px;\n }\n @media only screen and (min-width: 1024px) {\n width: 150px;\n }\n`\nconst Logo = styled.img`\n width: 100%;\n`\nconst InsideContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n`;\n\nconst Back = styled.img`\n cursor: pointer;\n margin: 10px 0 0 20px;\n // width: 48px;\n width: 40px;\n height: 40px;\n /* UI Properties */\n box-shadow: 0px 3px 6px var(--unnamed-color-ffffff);\n background: #FFFFFF80 0% 0% no-repeat padding-box;\n box-shadow: 0px 3px 6px #FFFFFF;\n border-radius: 65px;\n opacity: 1;\n backdrop-filter: blur(32px);\n -webkit-backdrop-filter: blur(32px);\n`;\n\n\nconst TopBar = () => {\n let location = useLocation()\n let path = location.pathname\n\n let history = useHistory()\n\n return (\n \n \n {path === \"/\" ?\n // \n \n :\n history.goBack()} src='/svg/back-top-menu.svg' />\n }\n\n \n \n )\n}\n\nexport default TopBar","import React from 'react';\nimport styled from 'styled-components'\n\nconst ButtonStyled = styled.div`\n background-color: #F8F8F8;\n border: none;\n border-radius: 6px;\n color: #2D373C;\n cursor: pointer;\n font-family: SemiBoldFont;\n font-size: 14px;\n margin: 10px 0;\n padding: 15px;\n width: 95%;\n\n @media only screen and (min-width: 768px) {\n width: 90%;\n }\n\n @media only screen and (min-width: 1200px) {\n font-size: 18px;\n width: 370px;\n }\n`;\n\nconst MaoriText = styled.p`\n font-family: SemiBoldFont;\n font-size: 16px;\n`;\n\nconst EngText = styled.p`\n font-family: RegularFont;\n font-size: 12px;\n margin-top: -10px;\n`;\n\n\nconst ButtonChoiceB = ({ maoriText, engText }) => {\n return (\n\n \n {maoriText} \n {engText} \n \n\n )\n}\n\nexport default ButtonChoiceB;","import React from 'react';\nimport { Link, useParams } from 'react-router-dom'\nimport styled from 'styled-components'\nimport ButtonKarakias from '../ButtonChoiceB';\n\nconst OutContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: center;\n margin: 20px 0;\n text-align: center;\n`;\n\nconst ButtonContainer = styled.div`\n\n`;\n\nconst KarakiaButtons = () => {\n const { view } = useParams()\n\n return (\n \n \n {view !== \"1\" &&\n \n \n\n )\n}\n\nexport default KarakiaButtons;","import React from 'react';\nimport styled from 'styled-components'\nimport KarakiaButtons from './KarakiaButtons';\nimport Title from '../Title';\n\nconst Container = styled.div`\n text-align: center;\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: center;\n`;\n\nconst SubTitle = styled.p`\n margin: -30px 0 50px 0;\n`;\n\nconst Audio = styled.audio`\n width: 80%;\n margin-bottom: 2rem;\n`;\n\nconst LyricContainer = styled.div`\n // background-color: #F8F8F8;\n background: #FFFFFF80 0% 0% no-repeat padding-box;\n border-radius: 6px;\n margin-top: 30px;\n text-align: center;\n padding 50px 0;\n width: 100%;\n \n // @media only screen and (min-width: 850px) {\n // width: 90%;\n // }\n // @media only screen and (min-width: 1200px) {\n // width: 100%;\n // }\n`;\n\nconst KarakiaView = ({\n title,\n subTitle,\n song,\n lyric\n}) => {\n return (\n\n \n \n
\n {subTitle} \n\n \n\n
\n
\n\n )\n}\n\nexport default KarakiaView;","import React from 'react';\nimport styled from 'styled-components'\n\nconst TextMaori = styled.p`\n color: #AE0F0B;\n font-family: MediumFont;\n font-size: 15px;\n width: 70%;\n margin: 0 auto;\n @media only screen and (min-width: 768px) {\n font-size: 20px;;\n }\n`;\n\nconst TextEng = styled.p`\n color: #2F373B;\n font-size: 12px;\n width: 70%;\n margin: -5px auto 20px auto;\n @media only screen and (min-width: 768px) {\n font-size: 15px;\n }\n`;\n\nconst TextTextGroup = ({ textMaori, textEng }) => {\n\n return (\n <>\n {textMaori} \n {textEng} \n \n )\n}\n\nexport default TextTextGroup;","import React from 'react';\nimport KarakiaTextGroup from './KarakiaTextGroup'\n\nconst LyricOne = () => {\n\n return (\n \n
\n )\n}\n\nexport default LyricOne;","import React from 'react';\nimport KarakiaTextGroup from './KarakiaTextGroup'\n\nconst LyricTwo = () => {\n\n return (\n \n
\n )\n}\n\nexport default LyricTwo;","import React from 'react';\nimport KarakiaTextGroup from './KarakiaTextGroup'\n\nconst LyricThree = () => {\n\n return (\n \n
\n )\n}\n\nexport default LyricThree;","import React from 'react';\nimport KarakiaTextGroup from './KarakiaTextGroup'\n\nconst LyricFour = () => {\n\n return (\n \n
\n )\n}\n\nexport default LyricFour;","import React from 'react';\nimport KarakiaTextGroup from './KarakiaTextGroup'\n\nconst LyricFive = () => {\n\n return (\n \n
\n )\n}\n\nexport default LyricFive;","import React from 'react';\nimport KarakiaTextGroup from './KarakiaTextGroup'\n\nconst LyricSix = () => {\n\n return (\n \n
\n )\n}\n\nexport default LyricSix;","import React from 'react';\nimport KarakiaTextGroup from './KarakiaTextGroup'\n\nconst LyricSeven = () => {\n\n return (\n \n
\n )\n}\n\nexport default LyricSeven;","import React from 'react';\nimport KarakiaTextGroup from './KarakiaTextGroup'\n\nconst LyricEight = () => {\n\n return (\n \n
\n )\n}\n\nexport default LyricEight;","import React, { useEffect } from 'react';\nimport { Analytics } from 'aws-amplify'\nimport { useParams } from 'react-router-dom'\nimport styled from 'styled-components'\nimport Image from '../components/Image'\nimport KarakiaButtons from '../components/Karakia/KarakiaButtons';\nimport KarakiaView from '../components/Karakia/KarakiaView';\nimport LyricOne from '../components/Karakia/LyricOne';\nimport LyricTwo from '../components/Karakia/LyricTwo';\nimport LyricThree from '../components/Karakia/LyricThree';\nimport LyricFour from '../components/Karakia/LyricFour';\nimport LyricFive from '../components/Karakia/LyricFive';\nimport LyricSix from '../components/Karakia/LyricSix';\nimport LyricSeven from '../components/Karakia/LyricSeven';\nimport LyricEight from '../components/Karakia/LyricEight';\nimport Title from '../components/Title'\nimport SectionIntroHandlePopUp from '../components/SectionIntroHandlePopUp';\n\nconst ContainerAnima = styled.div`\n background-color: #435A36;\n height: 100vh;\n position: fixed;\n width: 100%;\n overflow-y: scroll;\n background-blend-mode: screen;\n // opacity: 0.5;\n background-image: url(/img/bg-1.png);\n background-position: left;\n background-size: cover;\n`;\nconst Container = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: center;\n padding: 75px 0 25px;\n align-items: center;\n @media only screen and (min-width: 1000px) {\n padding: 125px 0 25px;\n }\n`;\nconst ContentContainer = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n text-align: center;\n`;\n\nconst WhakapapaContainer = styled.div`\n margin-top: 55px;\n padding-bottom: 50px;\n // background-image: url(/img/bg-4.png);\n background-position: left;\n background-size: cover;\n background-repeat: no-repeat;\n`;\n\n// const IntroContainer = styled.div`\n// text-align: center;\n// display: flex;\n// flex-direction: column;\n// justify-content: center;\n// `;\nconst IntroContainer = styled.div`\n // @media only screen and (min-width: 1200px) {\n // display: flex;\n // flex-direction: column;\n // justify-content: center;\n // align-items: center;\n // height: 90vh;\n // }\n height: 100%;\n width: 560px;\n /* UI Properties */\n background: #FFFFFF80 0% 0% no-repeat padding-box;\n padding-bottom: 2rem;\n box-shadow: inset 0px 3px 6px #00000029;\n border-radius: 30px;\n opacity: 1;\n backdrop-filter: blur(30px);\n -webkit-backdrop-filter: blur(30px);\n margin: auto auto 30px;\n @media only screen and (max-width: 650px) {\n width: 100%;\n }\n @media only screen and (min-width: 850px) {\n width: 50%;\n }\n\n`;\nconst SectionIntroHandlePopUpContainer = styled.div`\n margin: -15px auto 32px auto;\n width: 400px;\n font-size: 19px;\n @media only screen and (max-width: 640px) {\n width: 80%;\n }\n`\n\nconst SubTitle = styled.p`\n margin-top: -30px;\n`;\n\nconst Content = styled.div`\n margin-top: 30px;\n`;\n\nconst URL = \"https://westpac-bucket.s3.ap-southeast-2.amazonaws.com/waiata/\"\n\nconst Karakia = () => {\n let { view } = useParams()\n\n useEffect(() => {\n Analytics.record({\n name: \"Karakia page visit\"\n })\n }, [])\n\n if (view) {\n return (\n \n \n \n \n {\n view === \"0\" &&\n \n \n Listen and learn Karakia (prayers) */}\n \n \n \n \n }\n\n {\n view === \"1\" &&\n \n \n \n \n )\n }\n\n}\n\nexport default Karakia;","import React from 'react';\nimport { Link, useParams } from 'react-router-dom'\nimport styled from 'styled-components'\nimport ButtonChoiceB from '../ButtonChoiceB';\n\nconst OutContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: center;\n margin: 20px 0;\n text-align: center;\n`;\n\nconst ButtonContainer = styled.div`\n\n`;\n\nconst AkonaButtons = () => {\n const { view } = useParams()\n\n return (\n \n \n {\n view !== \"1\" &&\n \n \n\n )\n}\n\nexport default AkonaButtons;","import React from 'react';\nimport styled from 'styled-components'\nimport AkonaButtons from './AkonaButtons';\nimport Title from '../Title';\n\nconst Container = styled.div`\n text-align: center;\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n`;\n\nconst IntroContainer = styled.div`\n // @media only screen and (min-width: 1200px) {\n // display: flex;\n // flex-direction: column;\n // justify-content: center;\n // align-items: center;\n // height: 90vh;\n // }\n height: 100%;\n width: 560px;\n /* UI Properties */\n background: #FFFFFF80 0% 0% no-repeat padding-box;\n padding-bottom: 2rem;\n box-shadow: inset 0px 3px 6px #00000029;\n border-radius: 30px;\n opacity: 1;\n backdrop-filter: blur(30px);\n -webkit-backdrop-filter: blur(30px);\n margin: auto auto 30px;\n @media only screen and (max-width: 650px) {\n width: 80%;\n }\n @media only screen and (min-width: 850px) {\n width: 40%;\n }\n\n`;\n\n\nconst SubTitle = styled.p`\n margin: -30px 0 50px 0;\n`;\n\nconst AkonaContainer = styled.div`\n // background-color: #F8F8F8;\n margin: 30px auto;\n text-align: center;\n padding: 20px 0;\n\n \n`;\n\nconst AkonaView = ({\n title,\n subTitle,\n content\n}) => {\n return (\n\n \n \n
{subTitle} \n\n \n {content}\n \n \n \n\n )\n}\n\nexport default AkonaView;","import React, { useState, useEffect } from \"react\";\nimport styled from 'styled-components'\n\nconst Button = styled.button`\n background-color: white;\n border: 2px solid #D5012B;\n // box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);\n color: #D5012B;\n cursor: pointer;\n border-radius: 50%;\n font-size: 18px;\n font-family: MediumFont;\n margin-left: 10px;\n width: 56px;\n height: 56px;\n\n :hover {\n background-color: #D5012B;\n color: white;\n }\n`;\n\nconst useAudio = url => {\n const [audio] = useState(new Audio(url));\n const [playing, setPlaying] = useState(false);\n\n const toggle = () => setPlaying(!playing);\n\n useEffect(() => {\n playing ? audio.play() : audio.pause();\n },\n [playing]\n );\n\n useEffect(() => {\n audio.addEventListener('ended', () => setPlaying(false));\n return () => {\n audio.removeEventListener('ended', () => setPlaying(false));\n };\n }, []);\n\n return [playing, toggle];\n};\n\n\nconst ButtonTapPlay = ({ url, text }) => {\n const [playing, toggle] = useAudio(url);\n\n return (\n {text} \n )\n}\n\nexport default ButtonTapPlay;","import React from 'react';\nimport styled from 'styled-components'\n\nconst SoundInconStyle = styled.img`\n margin-left: 10px;\n width: 20px;\n`;\n\nconst SoundIcon = () => \n \n
\n \n There are five vowels sounds in the Māori language.\n They can be pronounced short or long.\n We mark the long vowel with a macron, for example, ā.\n Click in the vowels to hear the correct pronunciation.\n
\n \n\n
Short vowels \n
\n
\n
\n
\n
\n\n
Long vowels \n
\n
\n
\n
\n
\n
\n )\n}\n\nexport default Vowels;","import React from 'react';\nimport styled from 'styled-components'\nimport ButtonTapPlay from '../ButtonTapPlay';\nimport SoundIcon from '../SoundIcon';\n\nconst OutContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: center;\n padding-bottom: 30px;\n`;\n\nconst TextContainer = styled.div`\n @media only screen and (max-width: 768px) {\n margin: 0 20px;;\n }\n\n @media only screen and (min-width: 768px) {\n width: 380px;\n }\n`;\n\nconst SubTitle = styled.p`\n font-size: 20px;\n margin: 50px 0 30px 0;\n`;\n\nconst BtContainer = styled.div`\n margin-bottom: 30px;\n`;\n\nconst S3_URL = \"https://westpac-bucket.s3.ap-southeast-2.amazonaws.com/whakahua/Syllables/\"\n\nconst Syllables = () => {\n\n return (\n \n \n
\n \n Every syllable ends with a vowel. Click in the syllables to hear the correct pronunciation.\n
\n \n\n
Syllables \n
\n \n\n
\n \n\n
\n \n\n
\n \n\n
\n \n\n
\n \n\n
\n \n\n
\n \n\n
\n \n\n
\n \n
\n )\n}\n\nexport default Syllables;","import React from 'react';\nimport styled from 'styled-components'\nimport ButtonTapPlay from '../ButtonTapPlay';\nimport SoundIcon from '../SoundIcon';\n\nconst OutContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: center;\n padding-bottom: 30px;\n`;\n\nconst TextContainer = styled.div`\n @media only screen and (max-width: 768px) {\n margin: 0 20px;;\n }\n\n @media only screen and (min-width: 768px) {\n width: 380px;\n }\n`;\n\nconst SubTitle = styled.p`\n font-size: 20px;\n margin: 50px 0 30px 0;\n`;\n\nconst BtContainer = styled.div`\n margin-bottom: 30px;\n`;\n\nconst S3_URL = \"https://westpac-bucket.s3.ap-southeast-2.amazonaws.com/whakahua/Consonants/\"\n\nconst Consonants = () => {\n\n return (\n \n \n
\n \n Click in the ten Māori consonants to hear the correct pronunciation.\n
\n \n\n\n
Consonants \n
\n \n\n
\n \n\n
\n \n Two of the consonants are digraphs, where two letters combine two form a sound\"\n
\n \n\n
\n \n ng as in singer\n
\n \n wh as in fish\n
\n \n\n
\n \n r as in cheddar\n
\n \n
\n )\n}\n\nexport default Consonants;","import React from 'react';\nimport styled from 'styled-components'\nimport ButtonTapPlay from '../ButtonTapPlay';\nimport SoundIcon from '../SoundIcon';\n\nconst OutContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: center;\n padding-bottom: 30px;\n`;\n\nconst TextContainer = styled.div`\n @media only screen and (max-width: 768px) {\n margin: 0 20px;;\n }\n\n @media only screen and (min-width: 768px) {\n width: 380px;\n }\n`;\n\nconst SubTitle = styled.p`\n font-size: 20px;\n margin: 50px 0 30px 0;\n`;\n\nconst BtContainer = styled.div`\n margin-bottom: 30px;\n`;\n\nconst S3_URL = \"https://westpac-bucket.s3.ap-southeast-2.amazonaws.com/Diphthongs/\"\n\nconst Diphthongs = () => {\n\n return (\n \n \n
\n \n Click in the ten Māori diphthongs to hear the correct pronunciation.\n
\n \n\n\n
Diphthongs \n
\n \n
\n \n
\n \n
\n \n
\n \n\n
\n )\n}\n\nexport default Diphthongs;","import React, { useEffect } from 'react';\nimport { Analytics } from 'aws-amplify'\nimport { useParams } from 'react-router-dom'\nimport styled from 'styled-components'\nimport Image from '../components/Image'\nimport AkonaButtons from '../components/Akona/AkonaButtons';\nimport AkonaView from '../components/Akona/AkonaView';\nimport Vowels from '../components/Akona/Vowels';\nimport Syllables from '../components/Akona/Syllables';\nimport Consonants from '../components/Akona/Consonants';\nimport Diphthongs from '../components/Akona/Diphthongs';\nimport Title from '../components/Title'\n\n\nconst WhakapapaContainer = styled.div`\n margin-top: 55px;\n`;\n\n// const IntroContainer = styled.div`\n// text-align: center;\n// display: flex;\n// flex-direction: column;\n// justify-content: center;\n// `;\nconst IntroContainer = styled.div`\n // @media only screen and (min-width: 1200px) {\n // display: flex;\n // flex-direction: column;\n // justify-content: center;\n // align-items: center;\n // height: 90vh;\n // }\n height: 100%;\n width: 560px;\n padding-bottom: 1rem;\n /* UI Properties */\n background: #FFFFFF80 0% 0% no-repeat padding-box;\n box-shadow: inset 0px 3px 6px #00000029;\n border-radius: 30px;\n opacity: 1;\n backdrop-filter: blur(30px);\n -webkit-backdrop-filter: blur(30px);\n margin: auto auto 0;\n @media only screen and (max-width: 650px) {\n width: 80%;\n }\n @media only screen and (min-width: 850px) {\n width: 40%;\n }\n\n`;\n\nconst SubTitle = styled.p`\n text-align: center;\n margin-top: -30px;\n`;\n\nconst Content = styled.div`\n margin-top: -40px;\n`;\n\nconst Akona = () => {\n let { view } = useParams()\n\n useEffect(() => {\n Analytics.record({\n name: \"Akona page visit\"\n })\n }, [])\n\n if (view) {\n return (\n \n {\n view === \"0\" &&\n \n \n Pronunciation */}\n \n \n }\n\n {\n view === \"1\" &&\n \n )\n }\n\n}\n\nexport default Akona;","import React from 'react';\nimport { Link, useParams } from 'react-router-dom'\nimport styled from 'styled-components'\nimport ButtonWaiatas from '../ButtonChoiceB';\n\nconst OutContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: center;\n margin: 20px 0;\n text-align: center;\n`;\n\nconst ButtonContainer = styled.div`\n\n`;\n\nconst WaiataButtons = () => {\n const { view } = useParams()\n\n return (\n \n \n {view !== \"1\" &&\n \n \n\n )\n}\n\nexport default WaiataButtons;","import React from 'react'\nimport styled from 'styled-components'\n\nconst Container = styled.p`\nwidth: 58%;\nmargin: -30px auto 0 auto;\nfont-size: 17px;\npadding-bottom: 2rem;\n`\n\nconst SongInfo = ({title}) => {\n return (\n \n {title}\n \n )\n}\n\nexport default SongInfo","import React from 'react';\nimport styled from 'styled-components'\nimport WaiataButtons from './WaiataButtons';\nimport Title from '../Title';\nimport SongInfo from './SongInfo';\n\nconst Container = styled.div`\n text-align: center;\n width: 100%;\n display: flex;\n flex-direction: column;\n flex-direction: row;\n justify-content: center;\n`;\n\nconst SubTitle = styled.p`\n margin: -30px 0 50px 0;\n`;\n\nconst Audio = styled.audio`\n width: 80%;\n`;\n\nconst LyricContainer = styled.div`\n // background-color: #F8F8F8;\n margin: auto;\n text-align: center;\n padding 50px 0;\n\n @media only screen and (min-width: 1200px) {\n width: 530px;\n }\n`;\nconst IntroContainer = styled.div`\n // @media only screen and (min-width: 1200px) {\n // display: flex;\n // flex-direction: column;\n // justify-content: center;\n // align-items: center;\n // height: 90vh;\n // }\n height: 100%;\n width: 560px;\n /* UI Properties */\n background: #FFFFFF80 0% 0% no-repeat padding-box;\n padding-bottom: 2rem;\n box-shadow: inset 0px 3px 6px #00000029;\n border-radius: 30px;\n opacity: 1;\n backdrop-filter: blur(30px);\n -webkit-backdrop-filter: blur(30px);\n margin: auto auto 30px;\n @media only screen and (max-width: 650px) {\n width: 80%;\n }\n @media only screen and (min-width: 850px) {\n width: 50%;\n }\n\n`;\n\n\n\nconst WaiataView = ({\n title,\n subTitle,\n song,\n lyric,\n songInfoText,\n}) => {\n return (\n\n \n \n
{subTitle} \n\n \n {lyric}\n \n \n \n\n )\n}\n\nexport default WaiataView;","import React from 'react';\nimport styled from 'styled-components'\n\nconst Container = styled.div`\n margin: 0 20px;\n`;\n\nconst TextMaori = styled.p`\n color: #2F373B;\n font-family: MediumFont;\n font-size: 15px;\n\n @media only screen and (min-width: 768px) {\n font-size: 20px;;\n }\n`;\n\nconst TextEng = styled.p`\n color: #2F373B;\n margin-top: -15px;\n font-size: 12px;\n\n @media only screen and (min-width: 768px) {\n font-size: 15px;\n }\n`;\n\nconst TextTextGroup = ({ textMaori, textEng }) => {\n\n return (\n \n {textMaori} \n {textEng} \n \n )\n}\n\nexport default TextTextGroup;","import React from 'react';\nimport WaiataTextGroup from './WaiataTextGroup'\n\nconst LyricOne = () => {\n\n return (\n \n
\n\n )\n}\n\nexport default LyricOne;","import React from 'react';\nimport WaiataTextGroup from './WaiataTextGroup'\n\nconst LyricThree = () => {\n\n return (\n \n
\n\n )\n}\n\nexport default LyricThree;","import React from 'react';\nimport WaiataTextGroup from './WaiataTextGroup'\n\n\nconst LyricFour = () => {\n\n return (\n \n
\n\n )\n}\n\nexport default LyricFour;","import React from 'react';\nimport WaiataTextGroup from './WaiataTextGroup'\n\nconst LyricFive = () => {\n\n return (\n \n
\n\n )\n}\n\nexport default LyricFive;","import React from 'react';\nimport WaiataTextGroup from './WaiataTextGroup'\n\nconst LyricSix = () => {\n\n return (\n \n
\n\n )\n}\n\nexport default LyricSix;","import React from 'react';\nimport WaiataTextGroup from './WaiataTextGroup'\n\nconst LyricSeven = () => {\n\n return (\n \n\n
\n\n )\n}\n\nexport default LyricSeven;","import React from 'react';\nimport WaiataTextGroup from './WaiataTextGroup'\n\nconst LyricEight = () => {\n\n return (\n \n\n
\n\n )\n}\n\nexport default LyricEight;","import React, { useEffect } from 'react';\nimport { Analytics } from 'aws-amplify'\nimport { useParams } from 'react-router-dom'\nimport styled from 'styled-components'\nimport Image from '../components/Image'\nimport WaiataButtons from '../components/Waiata/WaiataButtons';\nimport WaiataView from '../components/Waiata/WaiataView';\nimport LyricOne from '../components/Waiata/LyricOne';\nimport LyricTwo from '../components/Waiata/LyricTwo';\nimport LyricThree from '../components/Waiata/LyricThree';\nimport LyricFour from '../components/Waiata/LyricFour';\nimport LyricFive from '../components/Waiata/LyricFive';\nimport LyricSix from '../components/Waiata/LyricSix';\nimport LyricSeven from '../components/Waiata/LyricSeven';\nimport LyricEight from '../components/Waiata/LyricEight';\n\nimport Title from '../components/Title'\nimport SectionIntroHandlePopUp from '../components/SectionIntroHandlePopUp';\n\n\nconst WhakapapaContainer = styled.div`\n margin-top: 55px;\n`;\n\n// const IntroContainer = styled.div`\n// text-align: center;\n// display: flex;\n// flex-direction: column;\n// justify-content: center;\n// `;\n\nconst IntroContainer = styled.div`\n // @media only screen and (min-width: 1200px) {\n // display: flex;\n // flex-direction: column;\n // justify-content: center;\n // align-items: center;\n // height: 90vh;\n // }\n height: 100%;\n width: 560px;\n /* UI Properties */\n background: #FFFFFF80 0% 0% no-repeat padding-box;\n padding-bottom: 2rem;\n box-shadow: inset 0px 3px 6px #00000029;\n border-radius: 30px;\n opacity: 1;\n backdrop-filter: blur(30px);\n -webkit-backdrop-filter: blur(30px);\n margin: auto auto 30px;\n @media only screen and (max-width: 650px) {\n width: 80%;\n }\n @media only screen and (min-width: 850px) {\n width: 50%;\n }\n\n`;\nconst SectionIntroHandlePopUpContainer = styled.div`\n margin: -15px auto 32px auto;\n width: 400px;\n font-size: 19px;\n`\n\n\n\nconst SubTitle = styled.p`\n margin-top: -30px;\n`;\n\nconst Content = styled.div`\n margin-top: -30px;\n`;\n\nconst URL = \"https://westpac-bucket.s3.ap-southeast-2.amazonaws.com/waiata/\"\n\n\nconst Waiata = () => {\n let { view } = useParams()\n\n useEffect(() => {\n Analytics.record({\n name: \"Waiata page visit\"\n })\n }, [])\n\n if (view) {\n return (\n \n {\n view === \"0\" &&\n \n \n Listen and learn songs */}\n \n \n \n \n }\n\n {\n view === \"1\" &&\n \n )\n }\n\n}\n\nexport default Waiata;","import React, { useEffect } from 'react';\nimport { Analytics } from 'aws-amplify'\nimport styled from 'styled-components'\nimport Image from '../components/Image'\nimport { Link } from 'react-router-dom'\n\n\nconst ContentOutContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: center;\n padding-bottom: 40px;\n`;\n\nconst ContentInContainer = styled.div`\n text-align: center;\n`;\n\n\nconst TextContainer = styled.div`\n`;\n\nconst TextValues = styled.p`\n font-size: 12px;\n color: #AE0F0B;\n text-align: center;\n @media only screen and (min-width: 768px) {\n font-size: 18px;\n }\n`;\n\nconst WelcomeContainer = styled.div`\n /* Layout Properties */\n\n left: 543px;\n width: 560px;\n margin:auto auto 30px; \n /* UI Properties */\n background: #FFFFFF80 0% 0% no-repeat padding-box;\n box-shadow: inset 0px 3px 6px #00000029;\n border-radius: 30px;\n opacity: 1;\n backdrop-filter: blur(3px);\n -webkit-backdrop-filter: blur(3px);\n @media only screen and (max-width: 650px) {\n width: 80%;\n }\n`\n\nconst ContentContainer = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n text-align: center;\n`;\nconst Button = styled.button`\n background: #FFFFFF80 0% 0% no-repeat padding-box;\n box-shadow: inset 0px 3px 6px #00000029;\n border: none;\n border-radius: 10px; \n opacity: 1;\n color: #2D373C;\n cursor: pointer;\n margin: 5px 15px 5px 15px;\n padding: 7px 15px 7px 5px;\n backdrop-filter: blur(3px);\n -webkit-backdrop-filter: blur(3px);\n`;\nconst Icon = styled.img` \n margin: 0 10px; \n width: 40px;\n\n @media only screen and (min-width: 768px) {\n width: 55px;\n }\n`;\nconst ButtonContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n`;\nconst IconTextContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: left;\n align-items: center;\n`;\nconst ButtonText = styled.p` \n font-size: 14px;\n font-weight: bold;\n color: #22170F; \n\n @media only screen and (min-width: 768px) {\n font-size: 18px;\n }\n`;\nconst ButtonTextSpan = styled.span` \n font-size: 70%;\n font-weight: normal;\n`;\n\nconst TitleContainer = styled.h1`\n font-size: 20px;\n margin: 30px 0;\n color: #AE0F0B;\n text-align: center;\n @media only screen and (min-width: 768px) {\n font-size: 30px;\n }\n\n @media only screen and (min-width: 1200px) {\n font-size: 30px;\n }\n`;\n\nconst WelcomePageContainer = styled.div`\n background-color: #435A36;\n height: 100vh;\n position: fixed;\n width: 100%;\n overflow-y: scroll;\n background-image: url(/img/bg-1.png);\n background-blend-mode: screen;\n background-position: left;\n background-size: cover;\n`;\n\nconst Welcome = () => {\n\n useEffect(() => {\n Analytics.record({\n name: \"Welcome page visit\"\n })\n }, [])\n\n return (\n \n \n \n \n Kete Kōrero\n \n \n Tool Kit\n \n \n {/* \n */}\n \n \n \n \n \n Mihi Tīmatanga (Greetings) \n \n \n \n \n\n \n \n \n Mihi Mutunga (Farewells) \n \n \n \n \n\n \n \n \n Kupu Whakatepe (Sign Offs) \n \n \n \n \n\n \n \n \n Kīwaha (Idioms) \n \n \n \n \n\n \n \n \n Tohutohu (Instructions) \n \n \n \n \n \n \n \n Reo Ōpaki (Survival Reo) \n \n \n \n \n\n \n \n \n \n )\n}\n\nexport default Welcome;","import React, { useEffect, useState } from \"react\";\nimport styled from \"styled-components\";\nimport { getMaoriVoices } from \"../../utils/maori-voices\";\n\nconst StyledTable = styled.table`\n @media only screen and (max-width: 650px) {\n width: 80%;\n }\n width: 100%;\n\n caption-side: top;\n border: none;\n // border-collapse: collapse;\n /* border-collapse: separate; */\n /* border-spacing: 5px 10px; */\n\n caption-side: bottom;\n\n td,\n th {\n border: none;\n }\n /* td,\n th {\n border: 1px solid;\n } */\n\n td {\n padding: 30px 10px;\n border: 3px solid #FFFFFF;\n border-color: #FFFFFF;\n color: #174221;\n font-weight: bold;\n }\n td p {\n cursor: pointer;\n width: 20px;\n margin: 0 5px;\n }\n td img {\n width: 17px\n }\n tbody tr {\n background: var(--unnamed-color-deb22f) 0% 0% no-repeat padding-box;\n // border: 3px solid var(--unnamed-color-ffffff);\n border: 3px solid #FFFFFF;\n opacity: 1;\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n }\n tr > td:first-child {\n display:flex;\n justify-content: center;\n align-items : center;\n }\n caption {\n font-size: 0.9em;\n padding: 5px;\n font-weight: bold;\n }\n \n`;\n\nconst TextMaori = styled.span`\n color: ${props => props.colorTextMaori};\n font-family: MediumFont;\n font-size: 14px;\n display: inline-block;\n height: auto;\n width: auto;\n // margin: 20px auto;\n`;\n\n\n\nconst TableMarkup = ({ data, clickHandler }) => {\n const [playing, setPlaying] = useState(false);\n const [maoriText, setMaoriText] = useState(null);\n\n const toggleClick = (text) => {\n setPlaying(!playing);\n setMaoriText(text);\n };\n\n useEffect(() => {\n const audio = new Audio();\n \n if (maoriText) {\n const maoriVoice = getMaoriVoices(maoriText);\n if (maoriVoice && playing) {\n audio.src = maoriVoice;\n audio.play();\n }\n } else {\n speechSynthesis.cancel();\n audio.pause();\n audio.src = '';\n }\n \n audio.addEventListener(\"ended\", () => {\n setPlaying(false);\n setMaoriText(null)\n });\n \n return () => {\n if (audio) {\n audio.removeEventListener(\"ended\", () => {\n setPlaying(false);\n setMaoriText(null);\n });\n }\n };\n }, [playing, maoriText]);\n\n return (\n \n \n \n \n {data.map((item, index) => (\n \n \n {item.Capital.split(\" \").filter(Boolean).map((word, index) => (\n \n {word} \n \n ))}\n toggleClick(item.Capital)}>\n
\n \n {item.Currency} \n \n ))}\n \n \n );\n};\n\nexport default TableMarkup;","export const data = [\n {\n Capital: \"Kia ora\",\n Currency: \"Hello/Thanks\",\n },\n {\n Capital: \"Tēnā koe\",\n Currency: \"Greetings (1 person)\",\n },\n {\n Capital: \"Tēnā kōrua\",\n Currency: \"Greetings (2 people)\",\n },\n {\n Capital: \"Tēnā koutou\",\n Currency: \"Greetings (3 + people)\",\n },\n {\n Capital: \"Ata mārie\",\n Currency: \"Good morning\",\n },\n {\n Capital: \"Mōrena\",\n Currency: \"Morning\",\n },\n {\n Capital: \"Ngā mihi o te ahiahi\",\n Currency: \"Good afternoon\",\n }\n];","import styled, { css } from \"styled-components\";\n\nexport const CenterV = css`\n display: flex;\n align-items: center;\n`;\n\nexport const CenterH = css`\n display: flex;\n justify-content: center;\n`;\n\nexport const CenterVH = css`\n display: flex;\n justify-content: center;\n align-items: center;\n`;\n\nexport const Center = styled.div`\n /* This is an example of a nested interpolation */\n ${props => (props.V ? CenterV : \"\")}\n ${props => (props.H ? CenterH : \"\")}\n`;\n","import React, { useContext, useEffect } from 'react';\nimport { Analytics } from 'aws-amplify'\nimport styled from 'styled-components'\nimport Image from '../Image'\nimport { Link } from 'react-router-dom'\nimport Table from \"./tables\";\nimport { data } from \"./tabledata/greetingsdata\";\nimport { Center } from \"./mixintable\";\nimport { playMaoriSound } from '../../utils/play-maori-sound';\nimport { MaoriAudioContext } from '../mihimihi/MihimihiFlow';\nimport { getMaoriVoices } from '../../utils/maori-voices';\n\n\nconst ContentOutContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: center;\n`;\n\nconst ContentInContainer = styled.div`\n text-align: center;\n`;\n\n\nconst TextContainer = styled.div`\n`;\n\nconst TextValues = styled.p`\n font-size: 12px;\n color: #AE0F0B;\n text-align: center;\n @media only screen and (min-width: 768px) {\n font-size: 18px;\n }\n`;\n\nconst WelcomeContainer = styled.div`\n /* Layout Properties */\n left: 543px;\n width: 560px;\n margin:auto auto 30px; \n /* UI Properties */\n background: #FFFFFF80 0% 0% no-repeat padding-box;\n box-shadow: inset 0px 3px 6px #00000029;\n border-radius: 30px;\n opacity: 1;\n backdrop-filter: blur(3px);\n -webkit-backdrop-filter: blur(3px);\n @media only screen and (max-width: 650px) {\n width: 80%;\n }\n`\n\nconst ContentContainer = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n text-align: center;\n margin-bottom: 30px;\n`;\nconst Button = styled.button`\n background: #FFFFFF80 0% 0% no-repeat padding-box;\n box-shadow: inset 0px 3px 6px #00000029;\n border: none;\n border-radius: 10px; \n opacity: 1;\n color: #2D373C;\n cursor: pointer;\n margin: 5px 15px 5px 15px;\n padding: 7px 15px 7px 5px;\n backdrop-filter: blur(3px);\n -webkit-backdrop-filter: blur(3px);\n`;\nconst Icon = styled.img` \n margin: 0 10px; \n width: 40px;\n\n @media only screen and (min-width: 768px) {\n width: 55px;\n }\n`;\n\nconst IconHeader = styled.img`\n margin: 0 10px; \n width: 40px;\n display: block;\n margin-left: auto;\n margin-right: auto;\n\n @media only screen and (min-width: 768px) {\n width: 55px;\n display: block;\n margin-left: auto;\n margin-right: auto;\n }\n`;\nconst ButtonContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n`;\nconst IconTextContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: left;\n align-items: center;\n`;\nconst ButtonText = styled.p` \n font-size: 14px;\n font-weight: bold;\n color: #22170F; \n\n @media only screen and (min-width: 768px) {\n font-size: 18px;\n }\n`;\nconst ButtonTextSpan = styled.span` \n font-size: 70%;\n font-weight: normal;\n`;\n\nconst TitleContainer = styled.h1`\n font-size: 20px;\n margin: 30px 0;\n color: #22170F;\n text-align: center;\n @media only screen and (min-width: 768px) {\n font-size: 30px;\n }\n\n @media only screen and (min-width: 1200px) {\n font-size: 30px;\n }\n`;\n\nconst WelcomePageContainer = styled.div`\n background-color: #435A36;\n height: 20vh;\n position: fixed;\n top: 0;\n width: 100%;\n overflow-y: scroll;\n background-image: url(/img/bg-3.png);\n background-position: left;\n background-size: cover;\n`;\n\nconst TableContainer = styled.table`\n border: 1px solid;\n`;\n\nconst Greetings = () => {\n\n useEffect(() => {\n Analytics.record({\n name: \"Greetings page visit\"\n })\n }, [])\n\n const { updateAudio, setInsideTextIsAudioPlaying } = useContext(MaoriAudioContext);\n\n const handlePlaybackFinished = () => {\n updateAudio(null);\n setInsideTextIsAudioPlaying(false);\n };\n const clickHandler = (event) => {\n const maoriText = event.target.textContent.trim();\n playMaoriSound(maoriText.toLowerCase(), handlePlaybackFinished, setInsideTextIsAudioPlaying, updateAudio)\n\n }\n return (\n <>\n \n \n \n \n \n Greetings\n \n \n {/* \n */}\n \n \n \n \n \n \n \n \n \n )\n}\n\nexport default Greetings;","export const data = [\n {\n Capital: \"Ka kite\",\n Currency: \"See you later\",\n },\n {\n Capital: \"Haere rā\",\n Currency: \"Farewell (to someone leaving)\",\n },\n {\n Capital: \"E noho rā\",\n Currency: \"Farewell (to someone staying)\",\n },\n {\n Capital: \"Hei konei rā\",\n Currency: \"Farewell\",\n },\n {\n Capital: \"Pō mārie\",\n Currency: \"Good night\",\n },\n {\n Capital: \"Kia pai te rā\",\n Currency: \"Have a good day\",\n },\n {\n Capital: \"Hei te wā\",\n Currency: \"Till next time\",\n },\n {\n Capital: \"Ā tōna wā\",\n Currency: \"Till next time\",\n }\n];\n","import React, { useContext, useEffect } from 'react';\nimport { Analytics } from 'aws-amplify'\nimport styled from 'styled-components'\nimport Image from '../Image'\nimport { Link } from 'react-router-dom'\nimport Table from \"./tables\";\nimport { data } from \"./tabledata/farewellsdata\";\nimport { Center } from \"./mixintable\";\nimport { playMaoriSound } from '../../utils/play-maori-sound';\nimport { MaoriAudioContext } from '../mihimihi/MihimihiFlow';\n\n\nconst ContentOutContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: center;\n`;\n\nconst ContentInContainer = styled.div`\n text-align: center;\n`;\n\n\nconst TextContainer = styled.div`\n`;\n\nconst TextValues = styled.p`\n font-size: 12px;\n color: #AE0F0B;\n text-align: center;\n @media only screen and (min-width: 768px) {\n font-size: 18px;\n }\n`;\n\nconst WelcomeContainer = styled.div`\n /* Layout Properties */\n\n left: 543px;\n width: 560px;\n margin:auto auto 30px; \n /* UI Properties */\n background: #FFFFFF80 0% 0% no-repeat padding-box;\n box-shadow: inset 0px 3px 6px #00000029;\n border-radius: 30px;\n opacity: 1;\n backdrop-filter: blur(3px);\n -webkit-backdrop-filter: blur(3px);\n @media only screen and (max-width: 650px) {\n width: 80%;\n }\n`\n\nconst ContentContainer = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n text-align: center;\n margin-bottom: 30px;\n`;\nconst Button = styled.button`\n background: #FFFFFF80 0% 0% no-repeat padding-box;\n box-shadow: inset 0px 3px 6px #00000029;\n border: none;\n border-radius: 10px; \n opacity: 1;\n color: #2D373C;\n cursor: pointer;\n margin: 5px 15px 5px 15px;\n padding: 7px 15px 7px 5px;\n backdrop-filter: blur(3px);\n -webkit-backdrop-filter: blur(3px);\n`;\nconst Icon = styled.img` \n margin: 0 10px; \n width: 40px;\n\n @media only screen and (min-width: 768px) {\n width: 55px;\n }\n`;\n\nconst IconHeader = styled.img`\n margin: 0 10px; \n width: 40px;\n display: block;\n margin-left: auto;\n margin-right: auto;\n\n @media only screen and (min-width: 768px) {\n width: 55px;\n display: block;\n margin-left: auto;\n margin-right: auto;\n }\n`;\nconst ButtonContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n`;\nconst IconTextContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: left;\n align-items: center;\n`;\nconst ButtonText = styled.p` \n font-size: 14px;\n font-weight: bold;\n color: #22170F; \n\n @media only screen and (min-width: 768px) {\n font-size: 18px;\n }\n`;\nconst ButtonTextSpan = styled.span` \n font-size: 70%;\n font-weight: normal;\n`;\n\nconst TitleContainer = styled.h1`\n font-size: 20px;\n margin: 30px 0;\n color: #22170F;\n text-align: center;\n @media only screen and (min-width: 768px) {\n font-size: 30px;\n }\n\n @media only screen and (min-width: 1200px) {\n font-size: 30px;\n }\n`;\n\nconst WelcomePageContainer = styled.div`\n background-color: #435A36;\n height: 100vh;\n position: fixed;\n width: 100%;\n overflow-y: scroll;\n\n background-image: url(/img/home-background.png);\n background-position: left;\n background-size: cover;\n`;\n\nconst TableContainer = styled.table`\n border: 1px solid;\n`;\n\nconst Farewells = () => {\n\n useEffect(() => {\n Analytics.record({\n name: \"Greetings page visit\"\n })\n }, [])\n const { updateAudio, setInsideTextIsAudioPlaying } = useContext(MaoriAudioContext);\n\n const handlePlaybackFinished = () => {\n updateAudio(null);\n setInsideTextIsAudioPlaying(false);\n };\n const clickHandler = (event) => {\n const maoriText = event.target.textContent.trim();\n playMaoriSound(maoriText.toLowerCase(), handlePlaybackFinished, setInsideTextIsAudioPlaying, updateAudio)\n\n }\n return (\n \n \n \n \n Farewells\n \n \n {/* \n */}\n \n \n \n \n \n \n \n \n \n )\n}\n\nexport default Farewells;","export const data = [\n {\n Capital: \"Nā\",\n Currency: \"From\",\n },\n {\n Capital: \"Nāku, nā\",\n Currency: \"Yours faithfully\",\n },\n {\n Capital: \"Nāku iti noa, nā\",\n Currency: \"Yours sincerely\",\n },\n {\n Capital: \"Ngā mihi\",\n Currency: \"Thank you\",\n },\n {\n Capital: \"Ngā mihi nui\",\n Currency: \"Kind regards\",\n },\n {\n Capital: \"Hei konā mai\",\n Currency: \"Goodbye for now\",\n }\n ];\n ","import React, { useContext, useEffect } from 'react';\nimport { Analytics } from 'aws-amplify'\nimport styled from 'styled-components'\nimport Image from '../Image'\nimport { Link } from 'react-router-dom'\nimport Table from \"./tables\";\nimport { data } from \"./tabledata/signoffsdata\";\nimport { Center } from \"./mixintable\";\nimport { playMaoriSound } from '../../utils/play-maori-sound';\nimport { MaoriAudioContext } from '../mihimihi/MihimihiFlow';\n\n\nconst ContentOutContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: center;\n`;\n\nconst ContentInContainer = styled.div`\n text-align: center;\n`;\n\n\nconst TextContainer = styled.div`\n`;\n\nconst TextValues = styled.p`\n font-size: 12px;\n color: #AE0F0B;\n text-align: center;\n @media only screen and (min-width: 768px) {\n font-size: 18px;\n }\n`;\n\nconst WelcomeContainer = styled.div`\n /* Layout Properties */\n\n left: 543px;\n width: 560px;\n margin:auto auto 30px; \n /* UI Properties */\n background: #FFFFFF80 0% 0% no-repeat padding-box;\n box-shadow: inset 0px 3px 6px #00000029;\n border-radius: 30px;\n opacity: 1;\n backdrop-filter: blur(3px);\n -webkit-backdrop-filter: blur(3px);\n @media only screen and (max-width: 650px) {\n width: 80%;\n }\n`\n\nconst ContentContainer = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n text-align: center;\n margin-bottom: 30px;\n`;\nconst Button = styled.button`\n background: #FFFFFF80 0% 0% no-repeat padding-box;\n box-shadow: inset 0px 3px 6px #00000029;\n border: none;\n border-radius: 10px; \n opacity: 1;\n color: #2D373C;\n cursor: pointer;\n margin: 5px 15px 5px 15px;\n padding: 7px 15px 7px 5px;\n backdrop-filter: blur(3px);\n -webkit-backdrop-filter: blur(3px);\n`;\nconst Icon = styled.img` \n margin: 0 10px; \n width: 40px;\n\n @media only screen and (min-width: 768px) {\n width: 55px;\n }\n`;\n\nconst IconHeader = styled.img`\n margin: 0 10px; \n width: 40px;\n display: block;\n margin-left: auto;\n margin-right: auto;\n\n @media only screen and (min-width: 768px) {\n width: 55px;\n display: block;\n margin-left: auto;\n margin-right: auto;\n }\n`;\nconst ButtonContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n`;\nconst IconTextContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: left;\n align-items: center;\n`;\nconst ButtonText = styled.p` \n font-size: 14px;\n font-weight: bold;\n color: #22170F; \n\n @media only screen and (min-width: 768px) {\n font-size: 18px;\n }\n`;\nconst ButtonTextSpan = styled.span` \n font-size: 70%;\n font-weight: normal;\n`;\n\nconst TitleContainer = styled.h1`\n font-size: 20px;\n margin: 30px 0;\n color: #22170F;\n text-align: center;\n @media only screen and (min-width: 768px) {\n font-size: 30px;\n }\n\n @media only screen and (min-width: 1200px) {\n font-size: 30px;\n }\n`;\n\nconst WelcomePageContainer = styled.div`\n background-color: #435A36;\n height: 100vh;\n position: fixed;\n width: 100%;\n overflow-y: scroll;\n\n background-image: url(/img/home-background.png);\n background-position: left;\n background-size: cover;\n`;\n\nconst TableContainer = styled.table`\n border: 1px solid;\n`;\n\nconst SignOffs = () => {\n\n useEffect(() => {\n Analytics.record({\n name: \"Greetings page visit\"\n })\n }, [])\n const { updateAudio, setInsideTextIsAudioPlaying } = useContext(MaoriAudioContext);\n\n const handlePlaybackFinished = () => {\n updateAudio(null);\n setInsideTextIsAudioPlaying(false);\n };\n const clickHandler = (event) => {\n const maoriText = event.target.textContent.trim();\n playMaoriSound(maoriText.toLowerCase(), handlePlaybackFinished, setInsideTextIsAudioPlaying, updateAudio)\n\n }\n\n return (\n \n \n \n \n Sign Offs\n \n \n {/* \n */}\n \n \n \n \n \n \n \n \n \n )\n}\n\nexport default SignOffs;","export const data = [\n {\n Capital: \"Ka mau te wehi\",\n Currency: \"Wicked\",\n },\n {\n Capital: \"Koia kei a koe\",\n Currency: \"You’re awesome\",\n },\n {\n Capital: \"Hei aha tāu\",\n Currency: \"Never mind yours\",\n },\n {\n Capital: \"Aua hoki\",\n Currency: \"I don’t know\",\n },\n {\n Capital: \"Kei wīwī kei wāwā\",\n Currency: \"Here, there, everywhere\",\n },\n {\n Capital: \"Nē?\",\n Currency: \"Really?\",\n },\n {\n Capital: \"Nē\",\n Currency: \"Aye\",\n },\n {\n Capital: \"Nā whai anō\",\n Currency: \"No wonder\",\n },\n {\n Capital: \"Tōnā tikanga\",\n Currency: \"Supposedly\",\n },\n {\n Capital: \"E taea ana te aha\",\n Currency: \"What can one do\",\n },\n {\n Capital: \"Hoatu\",\n Currency: \"You go\",\n },\n {\n Capital: \"Hoake\",\n Currency: \"Let’s go\",\n },\n {\n Capital: \"Nā wai rā, nā wai rā\",\n Currency: \"As a result\",\n },\n {\n Capital: \"Ka mutu\",\n Currency: \"Furthermore\",\n },\n {\n Capital: \"Kei tūpono\",\n Currency: \"Just in case\",\n }\n ];\n ","import React, { useContext, useEffect } from 'react';\nimport { Analytics } from 'aws-amplify'\nimport styled from 'styled-components'\nimport Image from '../Image'\nimport { Link } from 'react-router-dom'\nimport Table from \"./tables\";\nimport { data } from \"./tabledata/idiomsdata\";\nimport { Center } from \"./mixintable\";\nimport { MaoriAudioContext } from '../mihimihi/MihimihiFlow';\nimport { playMaoriSound } from '../../utils/play-maori-sound';\n\n\nconst ContentOutContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: center;\n`;\n\nconst ContentInContainer = styled.div`\n text-align: center;\n`;\n\n\nconst TextContainer = styled.div`\n`;\n\nconst TextValues = styled.p`\n font-size: 12px;\n color: #AE0F0B;\n text-align: center;\n @media only screen and (min-width: 768px) {\n font-size: 18px;\n }\n`;\n\nconst WelcomeContainer = styled.div`\n /* Layout Properties */\n\n left: 543px;\n width: 560px;\n margin:auto auto 30px; \n /* UI Properties */\n background: #FFFFFF80 0% 0% no-repeat padding-box;\n box-shadow: inset 0px 3px 6px #00000029;\n border-radius: 30px;\n opacity: 1;\n backdrop-filter: blur(3px);\n -webkit-backdrop-filter: blur(3px);\n @media only screen and (max-width: 650px) {\n width: 80%;\n }\n`\n\nconst ContentContainer = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n text-align: center;\n margin-bottom: 30px;\n`;\nconst Button = styled.button`\n background: #FFFFFF80 0% 0% no-repeat padding-box;\n box-shadow: inset 0px 3px 6px #00000029;\n border: none;\n border-radius: 10px; \n opacity: 1;\n color: #2D373C;\n cursor: pointer;\n margin: 5px 15px 5px 15px;\n padding: 7px 15px 7px 5px;\n backdrop-filter: blur(3px);\n -webkit-backdrop-filter: blur(3px);\n`;\nconst Icon = styled.img` \n margin: 0 10px; \n width: 40px;\n\n @media only screen and (min-width: 768px) {\n width: 55px;\n }\n`;\n\nconst IconHeader = styled.img`\n margin: 0 10px; \n width: 40px;\n display: block;\n margin-left: auto;\n margin-right: auto;\n\n @media only screen and (min-width: 768px) {\n width: 55px;\n display: block;\n margin-left: auto;\n margin-right: auto;\n }\n`;\nconst ButtonContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n`;\nconst IconTextContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: left;\n align-items: center;\n`;\nconst ButtonText = styled.p` \n font-size: 14px;\n font-weight: bold;\n color: #22170F; \n\n @media only screen and (min-width: 768px) {\n font-size: 18px;\n }\n`;\nconst ButtonTextSpan = styled.span` \n font-size: 70%;\n font-weight: normal;\n`;\n\nconst TitleContainer = styled.h1`\n font-size: 20px;\n margin: 30px 0;\n color: #22170F;\n text-align: center;\n @media only screen and (min-width: 768px) {\n font-size: 30px;\n }\n\n @media only screen and (min-width: 1200px) {\n font-size: 30px;\n }\n`;\n\nconst WelcomePageContainer = styled.div`\n background-color: #435A36;\n height: 100vh;\n position: fixed;\n width: 100%;\n overflow-y: scroll;\n\n background-image: url(/img/home-background.png);\n background-position: left;\n background-size: cover;\n`;\n\nconst TableContainer = styled.table`\n border: 1px solid;\n`;\n\nconst Idioms = () => {\n\n useEffect(() => {\n Analytics.record({\n name: \"Greetings page visit\"\n })\n }, [])\n\n const { updateAudio, setInsideTextIsAudioPlaying } = useContext(MaoriAudioContext);\n\n const handlePlaybackFinished = () => {\n updateAudio(null);\n setInsideTextIsAudioPlaying(false);\n };\n const clickHandler = (event) => {\n const maoriText = event.target.textContent.trim();\n playMaoriSound(maoriText.toLowerCase(), handlePlaybackFinished, setInsideTextIsAudioPlaying, updateAudio)\n\n }\n return (\n \n \n \n \n Idioms\n \n \n {/* \n */}\n \n \n \n \n \n \n \n \n \n )\n}\n\nexport default Idioms;","export const data = [\n {\n Capital: \"Kuhu mai\",\n Currency: \"Come in\",\n },\n {\n Capital: \"E kai\",\n Currency: \"Eat\",\n },\n {\n Capital: \"Haere mai\",\n Currency: \"Come here\",\n },\n {\n Capital: \"Haere atu\",\n Currency: \"Go away\",\n },\n {\n Capital: \"E oma\",\n Currency: \"Run\",\n },\n {\n Capital: \"Āta haere\",\n Currency: \"Slow down\",\n },\n {\n Capital: \"Whakarongo mai\",\n Currency: \"Listen up\",\n },\n {\n Capital: \"Titiro mai\",\n Currency: \"Look towards me\",\n },\n {\n Capital: \"Huri mai\",\n Currency: \"Turn to me\",\n },\n {\n Capital: \"Taihoa\",\n Currency: \"Wait\",\n },\n {\n Capital: \"Kōrero mai\",\n Currency: \"Speak up\",\n },\n {\n Capital: \"Hoihoi\",\n Currency: \"Be quiet\",\n }\n ];\n ","import React, { useContext, useEffect } from 'react';\nimport { Analytics } from 'aws-amplify'\nimport styled from 'styled-components'\nimport Image from '../Image'\nimport { Link } from 'react-router-dom'\nimport Table from \"./tables\";\nimport { data } from \"./tabledata/instructionsdata\";\nimport { Center } from \"./mixintable\";\nimport { playMaoriSound } from '../../utils/play-maori-sound';\nimport { MaoriAudioContext } from '../mihimihi/MihimihiFlow';\n\n\nconst ContentOutContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: center;\n`;\n\nconst ContentInContainer = styled.div`\n text-align: center;\n`;\n\n\nconst TextContainer = styled.div`\n`;\n\nconst TextValues = styled.p`\n font-size: 12px;\n color: #AE0F0B;\n text-align: center;\n @media only screen and (min-width: 768px) {\n font-size: 18px;\n }\n`;\n\nconst WelcomeContainer = styled.div`\n /* Layout Properties */\n\n left: 543px;\n width: 560px;\n margin:auto auto 30px; \n /* UI Properties */\n background: #FFFFFF80 0% 0% no-repeat padding-box;\n box-shadow: inset 0px 3px 6px #00000029;\n border-radius: 30px;\n opacity: 1;\n backdrop-filter: blur(3px);\n -webkit-backdrop-filter: blur(3px);\n @media only screen and (max-width: 650px) {\n width: 80%;\n }\n`\n\nconst ContentContainer = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n text-align: center;\n margin-bottom: 30px;\n`;\nconst Button = styled.button`\n background: #FFFFFF80 0% 0% no-repeat padding-box;\n box-shadow: inset 0px 3px 6px #00000029;\n border: none;\n border-radius: 10px; \n opacity: 1;\n color: #2D373C;\n cursor: pointer;\n margin: 5px 15px 5px 15px;\n padding: 7px 15px 7px 5px;\n backdrop-filter: blur(3px);\n -webkit-backdrop-filter: blur(3px);\n`;\nconst Icon = styled.img` \n margin: 0 10px; \n width: 40px;\n\n @media only screen and (min-width: 768px) {\n width: 55px;\n }\n`;\n\nconst IconHeader = styled.img`\n margin: 0 10px; \n width: 40px;\n display: block;\n margin-left: auto;\n margin-right: auto;\n\n @media only screen and (min-width: 768px) {\n width: 55px;\n display: block;\n margin-left: auto;\n margin-right: auto;\n }\n`;\nconst ButtonContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n`;\nconst IconTextContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: left;\n align-items: center;\n`;\nconst ButtonText = styled.p` \n font-size: 14px;\n font-weight: bold;\n color: #22170F; \n\n @media only screen and (min-width: 768px) {\n font-size: 18px;\n }\n`;\nconst ButtonTextSpan = styled.span` \n font-size: 70%;\n font-weight: normal;\n`;\n\nconst TitleContainer = styled.h1`\n font-size: 20px;\n margin: 30px 0;\n color: #22170F;\n text-align: center;\n @media only screen and (min-width: 768px) {\n font-size: 30px;\n }\n\n @media only screen and (min-width: 1200px) {\n font-size: 30px;\n }\n`;\n\nconst WelcomePageContainer = styled.div`\n background-color: #435A36;\n height: 100vh;\n position: fixed;\n width: 100%;\n overflow-y: scroll;\n\n background-image: url(/img/home-background.png);\n background-position: left;\n background-size: cover;\n`;\n\nconst TableContainer = styled.table`\n border: 1px solid;\n`;\n\nconst Instructions = () => {\n\n useEffect(() => {\n Analytics.record({\n name: \"Greetings page visit\"\n })\n }, [])\n\n const { updateAudio, setInsideTextIsAudioPlaying } = useContext(MaoriAudioContext);\n\n const handlePlaybackFinished = () => {\n updateAudio(null);\n setInsideTextIsAudioPlaying(false);\n };\n const clickHandler = (event) => {\n const maoriText = event.target.textContent.trim();\n playMaoriSound(maoriText.toLowerCase(), handlePlaybackFinished, setInsideTextIsAudioPlaying, updateAudio)\n\n }\n return (\n \n \n \n \n Instructions\n \n \n {/* \n */}\n \n \n \n \n \n \n \n \n \n )\n}\n\nexport default Instructions;","export const data = [\n {\n Capital: \"Āwhina mai\",\n Currency: \"Please help\",\n },\n {\n Capital: \"Kei hea te wharepaku\",\n Currency: \"Where are the toilets\",\n },\n {\n Capital: \"Kei hea te wharekai\",\n Currency: \"Where is the kitchen/ dining room\",\n },\n {\n Capital: \"Āe\",\n Currency: \"Yes\",\n },\n {\n Capital: \"Kāo\",\n Currency: \"No\",\n },\n // {\n // Capital: \"Kōrero mai anō\", \n // Currency: \"Say that again\",\n // },\n {\n Capital: \"Kōrero mai anō\",\n Currency: \"Say that again\",\n },\n {\n Capital: \"He aha te kupu Māori mō ….?\",\n Currency: \"What is the Māori word for …?\",\n },\n {\n Capital: \"He aha te kupu Pākehā mō…?\",\n Currency: \"What is the English word for …?\",\n },\n {\n Capital: \"Homai te ….\",\n Currency: \"Pass me the ….\",\n },\n {\n Capital: \"He pātai tāku\",\n Currency: \"I have a question\",\n },\n {\n Capital: \"Kei te pai ahau\",\n Currency: \"I’m okay\",\n },\n {\n Capital: \"Kāore au I te pai\",\n Currency: \"I’m not okay\",\n },\n {\n Capital: \"Kua hiakai ahau\",\n Currency: \"I’m hungry\",\n },\n {\n Capital: \"Kua hiainu ahau\",\n Currency: \"I’m thirsty\",\n }\n];\n","import React, { useContext, useEffect } from 'react';\nimport { Analytics } from 'aws-amplify'\nimport styled from 'styled-components'\nimport Image from '../Image'\nimport { Link } from 'react-router-dom'\nimport Table from \"./tables\";\nimport { data } from \"./tabledata/survivalreodata\";\nimport { Center } from \"./mixintable\";\nimport { MaoriAudioContext } from '../mihimihi/MihimihiFlow';\nimport { playMaoriSound } from '../../utils/play-maori-sound';\n\n\nconst ContentOutContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: center;\n`;\n\nconst ContentInContainer = styled.div`\n text-align: center;\n`;\n\n\nconst TextContainer = styled.div`\n`;\n\nconst TextValues = styled.p`\n font-size: 12px;\n color: #AE0F0B;\n text-align: center;\n @media only screen and (min-width: 768px) {\n font-size: 18px;\n }\n`;\n\nconst WelcomeContainer = styled.div`\n /* Layout Properties */\n\n left: 543px;\n width: 560px;\n margin:auto auto 30px; \n /* UI Properties */\n background: #FFFFFF80 0% 0% no-repeat padding-box;\n box-shadow: inset 0px 3px 6px #00000029;\n border-radius: 30px;\n opacity: 1;\n backdrop-filter: blur(3px);\n -webkit-backdrop-filter: blur(3px);\n @media only screen and (max-width: 650px) {\n width: 80%;\n }\n`\n\nconst ContentContainer = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n text-align: center;\n margin-bottom: 30px;\n`;\nconst Button = styled.button`\n background: #FFFFFF80 0% 0% no-repeat padding-box;\n box-shadow: inset 0px 3px 6px #00000029;\n border: none;\n border-radius: 10px; \n opacity: 1;\n color: #2D373C;\n cursor: pointer;\n margin: 5px 15px 5px 15px;\n padding: 7px 15px 7px 5px;\n backdrop-filter: blur(3px);\n -webkit-backdrop-filter: blur(3px);\n`;\nconst Icon = styled.img` \n margin: 0 10px; \n width: 40px;\n\n @media only screen and (min-width: 768px) {\n width: 55px;\n }\n`;\n\nconst IconHeader = styled.img`\n margin: 0 10px; \n width: 40px;\n display: block;\n margin-left: auto;\n margin-right: auto;\n\n @media only screen and (min-width: 768px) {\n width: 55px;\n display: block;\n margin-left: auto;\n margin-right: auto;\n }\n`;\nconst ButtonContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n`;\nconst IconTextContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: left;\n align-items: center;\n`;\nconst ButtonText = styled.p` \n font-size: 14px;\n font-weight: bold;\n color: #22170F; \n\n @media only screen and (min-width: 768px) {\n font-size: 18px;\n }\n`;\nconst ButtonTextSpan = styled.span` \n font-size: 70%;\n font-weight: normal;\n`;\n\nconst TitleContainer = styled.h1`\n font-size: 20px;\n margin: 30px 0;\n color: #22170F;\n text-align: center;\n @media only screen and (min-width: 768px) {\n font-size: 30px;\n }\n\n @media only screen and (min-width: 1200px) {\n font-size: 30px;\n }\n`;\n\nconst WelcomePageContainer = styled.div`\n background-color: #435A36;\n height: 100vh;\n position: fixed;\n width: 100%;\n overflow-y: scroll;\n\n background-image: url(/img/home-background.png);\n background-position: left;\n background-size: cover;\n`;\n\nconst TableContainer = styled.table`\n border: 1px solid;\n`;\n\nconst SurvivalReo = () => {\n\n useEffect(() => {\n Analytics.record({\n name: \"Greetings page visit\"\n })\n }, [])\n\n const { updateAudio, setInsideTextIsAudioPlaying } = useContext(MaoriAudioContext);\n\n const handlePlaybackFinished = () => {\n updateAudio(null);\n setInsideTextIsAudioPlaying(false);\n };\n const clickHandler = (event) => {\n const maoriText = event.target.textContent.trim();\n playMaoriSound(maoriText.toLowerCase(), handlePlaybackFinished, setInsideTextIsAudioPlaying, updateAudio)\n\n }\n\n return (\n \n \n \n \n Survival Reo\n \n \n {/* \n */}\n \n \n \n \n \n \n \n \n \n )\n}\n\nexport default SurvivalReo;","import React from 'react'\nimport { useHistory } from 'react-router-dom'\n\nconst PracticeItem = ({ engTitle, maoriTitle, icon, path }) => {\n const history = useHistory()\n const clickHandler = () => {\n history.push(`/practice/${path}`)\n }\n return (\n \n
\n
\n
\n
\n
\n
{maoriTitle} \n
{engTitle} \n
\n
\n
\n {words.map((word, index) => (\n
\n element && spanRef.current.push(element)} className='white__option' onClick={handleClick}>{word} \n
\n ))}\n
\n
\n \n {maoriTextAlert}\n \n {score && Score: {score} }\n \n {engTextAlert}\n \n
\n
\n
\n
{title} \n Kimihia tōna hoa \n \n
\n
\n \n {\n `${pageNumber} / ${lastPage}`\n }\n \n
\n {\n errorAlert &&\n
\n }\n {\n successAlert &&\n
\n }\n {\n endAlert &&\n
\n }\n
\n
\n {\n practiceView === \"0\" &&\n
\n
\n
\n
\n
\n
Choose Your Course \n
\n
\n
\n {practiceItems.map(item => (\n
\n ))}\n
\n
\n
\n }\n {\n practiceItems.map(practiceItem => (\n practiceView === practiceItem.path &&\n
\n ))\n\n }\n
\n
\n \n
\n\n {/* A
looks through its children s and\n renders the first one that matches the current URL. */}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nexport default App;","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://cra.link/PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.0/8 are considered localhost for IPv4.\n window.location.hostname.match(/^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)\n);\n\nexport function register(config) {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit https://cra.link/PWA'\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl, config) {\n navigator.serviceWorker\n .register(swUrl)\n .then((registration) => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n 'New content is available and will be used when all ' +\n 'tabs for this page are closed. See https://cra.link/PWA.'\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch((error) => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl, {\n headers: { 'Service-Worker': 'script' },\n })\n .then((response) => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get('content-type');\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf('javascript') === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then((registration) => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log('No internet connection found. App is running in offline mode.');\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready\n .then((registration) => {\n registration.unregister();\n })\n .catch((error) => {\n console.error(error.message);\n });\n }\n}\n","const reportWebVitals = (onPerfEntry) => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry);\n getFID(onPerfEntry);\n getFCP(onPerfEntry);\n getLCP(onPerfEntry);\n getTTFB(onPerfEntry);\n });\n }\n};\n\nexport default reportWebVitals;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport * as serviceWorkerRegistration from './serviceWorkerRegistration';\nimport reportWebVitals from './reportWebVitals';\n\nimport { Amplify } from 'aws-amplify'\nimport awsExports from './aws-exports';\nAmplify.configure(awsExports);\n\nReactDOM.render(\n \n ,\n document.getElementById('root')\n);\n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://cra.link/PWA\nserviceWorkerRegistration.register();\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n"],"sourceRoot":""}
![\"Are](\"/svg/pepeha-red.svg\")
\n {/* ![](\"/svg/sound-glossary.svg\")
![](\"/svg/sound-glossary-pause.svg\")
\n ![\"practice](\"/imagesss/All)
\n