Direct naar

\n \n )}\n \n ) : null}\n \n);\n\nexport default IntroBlock;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { color, font } from \"../templates/ui\";\nimport IconArrowRight from \"./icons/IconArrowRight\";\nimport { Link } from \"react-router-dom\";\n\nconst StyledScoreListItem = styled(Link)`\n display: flex;\n align-items: center;\n padding: 15px;\n background-color: ${color.gray.lighter};\n border-bottom: 1px solid ${color.gray.alt};\n text-decoration: none;\n\n &:last-child {\n border-bottom: none;\n }\n`;\n\nconst Score = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 38px;\n height: 38px;\n border-radius: 50%;\n background-color: ${color.primary.base};\n margin-right: 15px;\n\n span {\n color: ${color.body.base};\n font-size: 20px;\n font-weight: 700;\n font-family: ${font.family.alt};\n line-height: 1.1rem;\n z-index: 1;\n }\n\n &:before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 34px;\n height: 34px;\n border-radius: 50%;\n background-color: #f6f6f6;\n }\n\n &:after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 30px;\n height: 30px;\n border-radius: 50%;\n background-color: ${color.primary.base};\n }\n`;\n\nconst Name = styled.div`\n font-family: ${font.family.head};\n font-size: 16px;\n color: ${color.gray.darkest};\n font-weight: 600;\n`;\n\nconst StyledIconArrowRight = styled(IconArrowRight)`\n fill: ${color.primary.base};\n margin-left: auto;\n`;\n\nconst ScoreListItem = ({ score, name, href }) => (\n \n \n {score}\n \n {name}\n \n \n);\n\nexport default ScoreListItem;\n","import React from \"react\";\nimport ScoreListItem from \"../atoms/ScoreListItem\";\nimport { Fade } from \"react-reveal\";\n\nconst ScoreList = ({ id, goals, name, topScorers, breadcrumbs }) => (\n <>\n {topScorers &&\n topScorers.map((topScorer, index) => (\n \n \n \n ))}\n \n);\n\nexport default ScoreList;\n","import ApiClient from \"./ApiClient\";\n\nexport const getTournament = ({ id }) => ApiClient.get(`/tournaments/${id}`);\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { color, font } from \"../templates/ui\";\nimport IconArrowRight from \"./icons/IconArrowRight\";\nimport { Link } from \"react-router-dom\";\n\nconst StyledTeamMember = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 15px;\n background-color: ${color.body.base};\n border-bottom: 1px solid ${color.gray.lightest};\n`;\n\nconst Name = styled.div`\n color: ${color.black.base};\n font-size: 16px;\n font-family: ${font.family.head};\n font-weight: 600;\n flex: 1;\n`;\n\nconst StyledLink = styled(Link)`\n color: ${color.black.base};\n text-decoration: none;\n`;\n\nconst StyledArrowRight = styled(IconArrowRight)`\n fill: ${color.primary.base};\n`;\n\nconst TeamMember = ({ className, name, href }) => (\n \n \n {name}\n \n \n \n);\n\nexport default TeamMember;\n","import React, { useRef } from \"react\";\nimport styled from \"styled-components\";\nimport { color } from \"../templates/ui\";\nimport Swiper from \"react-id-swiper\";\nimport \"swiper/swiper-bundle.min.css\";\n\nconst SwiperWrapper = styled.div`\n > div {\n height: 100%;\n width: 100%;\n }\n\n .swiper-wrapper {\n z-index: -1 !important;\n }\n\n .swiper-button-next,\n .swiper-button-prev {\n position: absolute;\n top: auto;\n left: auto;\n bottom: 0;\n right: 0;\n background-color: ${color.primary.base};\n transition: background 0.2s ease-in-out;\n text-align: center;\n border: none;\n width: 40px;\n height: 40px;\n padding: 0;\n color: transparent;\n cursor: pointer;\n\n &:focus {\n outline: none;\n }\n }\n\n .swiper-button-next {\n &:after {\n content: \"\";\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-image: url(\"data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjlweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgOSAxNSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJUb2Vybm9vaWVuLWxpanN0L3RpamRsaWpuIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTA3Mi4wMDAwMDAsIC03NzQuMDAwMDAwKSIgZmlsbD0iI0ZGRkZGRiI+CiAgICAgICAgICAgIDxnIGlkPSJUb2Vybm9vaS1pdGVtIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNjAuMDAwMDAwLCAzODAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iU2xpZGVyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMzYuMDAwMDAwLCAxODAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM1OC4wMDAwMDAsIDIwMi4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTIzLjMxOTA3NTcsMTUuNjIwMDI3NCBMMjcsMTkuMjQwMDU0OSBMMjMuMzA4OTYzMSwyMi44NzAwMjc0IEMyMS4yNzg4OTMyLDI0Ljg2NjUxMzEgMTkuNjA4NzcxNiwyNi41IDE5LjU5NzU4MzEsMjYuNSBDMTkuNTg2Mzk0NiwyNi41IDE5LjIyMjM2MDgsMjYuMTUwOTEgMTguNzg4NjE5OSwyNS43MjQyNDQ4IEwxOCwyNC45NDg0ODk3IEwyMC44OTcxODI3LDIyLjA5OTIxOTQgQzIyLjQ5MDYzMzQsMjAuNTMyMTE5OCAyMy43OTQzNjUzLDE5LjI0MDk5NjkgMjMuNzk0MzY1MywxOS4yMzAwNTcyIEMyMy43OTQzNjUzLDE5LjIxOTExNzYgMjIuNDk3NDQ2OCwxNy45MzQ3NDMgMjAuOTEyMzI1NiwxNi4zNzU4OTIzIEwxOC4wMzAyODQyLDEzLjU0MTYxNjEgTDE4LjgxMzg3MzgsMTIuNzcwODA4MSBDMTkuMjQ0ODQ5NCwxMi4zNDY4NjM5IDE5LjYwNjYxOTcsMTIgMTkuNjE3ODA4MiwxMiBDMTkuNjI4OTk2NywxMiAyMS4yOTQ1NjY4LDEzLjYyOTAxMjMgMjMuMzE5MDc1NywxNS42MjAwMjc0IEwyMy4zMTkwNzU3LDE1LjYyMDAyNzQgWiIgaWQ9IlBhdGgiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=\") !important;\n background-repeat: no-repeat;\n width: 9px;\n height: 15px;\n }\n }\n\n .swiper-button-prev {\n right: 45px;\n\n &:after {\n content: \"\";\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-image: url(\"data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjlweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgOSAxNSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJUb2Vybm9vaWVuLWxpanN0L3RpamRsaWpuIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAyNi4wMDAwMDAsIC03NzQuMDAwMDAwKSIgZmlsbD0iI0ZGRkZGRiI+CiAgICAgICAgICAgIDxnIGlkPSJUb2Vybm9vaS1pdGVtIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNjAuMDAwMDAwLCAzODAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iU2xpZGVyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMzYuMDAwMDAwLCAxODAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMxNi4wMDAwMDAsIDIwMi4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTE3LjY4MDkyNDMsMjIuODc5OTcyNiBMMTQsMTkuMjU5OTQ1MSBMMTcuNjkxMDM2OSwxNS42Mjk5NzI2IEMxOS43MjExMDY4LDEzLjYzMzQ4NjkgMjEuMzkxMjI4NCwxMiAyMS40MDI0MTY5LDEyIEMyMS40MTM2MDU0LDEyIDIxLjc3NzYzOTIsMTIuMzQ5MDkgMjIuMjExMzgwMSwxMi43NzU3NTUyIEwyMywxMy41NTE1MTAzIEwyMC4xMDI4MTczLDE2LjQwMDc4MDYgQzE4LjUwOTM2NjYsMTcuOTY3ODgwMiAxNy4yMDU2MzQ3LDE5LjI1OTAwMzEgMTcuMjA1NjM0NywxOS4yNjk5NDI4IEMxNy4yMDU2MzQ3LDE5LjI4MDg4MjQgMTguNTAyNTUzMiwyMC41NjUyNTcgMjAuMDg3Njc0NCwyMi4xMjQxMDc3IEwyMi45Njk3MTU4LDI0Ljk1ODM4MzkgTDIyLjE4NjEyNjIsMjUuNzI5MTkxOSBDMjEuNzU1MTUwNiwyNi4xNTMxMzYxIDIxLjM5MzM4MDMsMjYuNSAyMS4zODIxOTE4LDI2LjUgQzIxLjM3MTAwMzMsMjYuNSAxOS43MDU0MzMyLDI0Ljg3MDk4NzcgMTcuNjgwOTI0MywyMi44Nzk5NzI2IEwxNy42ODA5MjQzLDIyLjg3OTk3MjYgWiIgaWQ9IlBhdGgiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=\") !important;\n background-repeat: no-repeat;\n width: 9px;\n height: 15px;\n }\n }\n`;\n\nconst SwiperComponent = ({ getImages }) => {\n const params = {\n navigation: {\n nextEl: \".swiper-button-next\",\n prevEl: \".swiper-button-prev\"\n },\n spaceBetween: 0,\n slidesPerView: 1,\n centeredSlides: true,\n loop: true,\n // IHT-108: Force rebuild swiper on update of props\n rebuildOnUpdate: true,\n renderPrevButton: () =>

,\n renderNextButton: () =>

\n };\n\n const ref = useRef(null);\n\n const nextPhoto = () => {\n if (ref.current !== null && ref.current.swiper !== null) {\n ref.current.swiper.slideNext();\n }\n };\n\n const previousPhoto = () => {\n if (ref.current !== null && ref.current.swiper !== null) {\n ref.current.swiper.slidePrev();\n }\n };\n\n return (\n \n \n {getImages()}\n \n \n );\n};\n\nexport default SwiperComponent;\n","import React from \"react\";\n\nconst IconErrorField = ({ className }) => (\n \n);\n\nexport default IconErrorField;\n","import React, { Component } from \"react\";\nimport { Helmet } from \"react-helmet\";\nimport styled from \"styled-components\";\nimport { font } from \"../templates/ui\";\nimport Header from \"../organisms/Header\";\nimport Footer from \"../organisms/Footer\";\nimport OffCanvasContainer from \"../organisms/OffCanvasContainer\";\nimport MainMenu from \"../molecules/MainMenu\";\nimport Container from \"../atoms/Container\";\nimport IconErrorField from \"../atoms/icons/IconErrorField\";\nimport { Link } from \"react-router-dom\";\n\nconst StyledTextContainer = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-direction: column;\n`;\n\nconst StyledText = styled.h2`\n font-family: ${font.family.head};\n font-size: 24px;\n font-weight: 700;\n color: #ef790c;\n margin-top: 22px;\n text-align: center;\n line-height: 1.1em;\n padding: 0 20px;\n\n @media only screen and (min-width: 640px) {\n font-size: 27px;\n padding: 0;\n }\n`;\n\nconst StyledContainer = styled(Container)`\n height: 100%;\n display: table-row;\n`;\n\nconst StyledIconErrorField = styled(IconErrorField)`\n width: 335px;\n height: 245px;\n\n @media only screen and (min-width: 640px) {\n width: 460px;\n height: 336px;\n }\n`;\n\nconst Paragraph = styled.p`\n font-family: ${font.family.base};\n font-size: 14px;\n margin-top: 21px;\n color: #5e5e5e;\n\n @media only screen and (min-width: 640px) {\n font-size: 16px;\n }\n`;\n\nconst StyledLink = styled(Link)`\n color: #ef790c;\n text-decoration: none;\n`;\n\nconst PartnerText = styled.p`\n font-family: ${font.family.head};\n font-size: 19px;\n color: #9b9b9b;\n margin: 0;\n text-align: center;\n\n @media only screen and (min-width: 640px) {\n font-size: 21px;\n }\n\n @media only screen and (min-width: 992px) {\n text-align: left;\n }\n`;\n\nconst PartnerBar = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: column;\n padding-bottom: 25px;\n\n @media only screen and (min-width: 992px) {\n flex-direction: row;\n }\n`;\n\nconst Partner = styled.div`\n width: 150px;\n height: 155px;\n\n img {\n display: block;\n margin: auto;\n width: 100%;\n max-width: 150px;\n height: auto;\n }\n`;\n\nconst ContentWrapper = styled.div`\n display: flex;\n justify-content: center;\n flex-direction: column;\n align-items: center;\n width: 100%;\n background-color: #fff;\n padding: 25px 0;\n\n @media only screen and (min-width: 640px) {\n padding: 50px 0;\n margin-bottom: 30px;\n }\n`;\n\nconst PartnerWrapper = styled.div`\n background-color: #fff;\n padding-top: 25px;\n width: 100%;\n`;\n\nconst Wrapper = styled.div`\n margin: 0 auto;\n padding: 0 20px;\n max-width: 1200px;\n`;\n\nclass NotFound extends Component {\n state = {\n menu_open: false,\n showFiltersCanvas: false\n };\n\n render() {\n return (\n <>\n \n \n \n

this.setState({ menu_open: !this.state.menu_open })} />\n \n \n \n \n Deze pagina heeft helaas het veld moeten ruimen\n \n \n Ga terug naar de Interlandhistorie\n \n \n \n \n \n Official partners Koninklijke Nederlandse Hockey Bond\n \n \n \n $\"adidas\"$ \n \n \n \n \n $\"Auping\"$ \n \n \n \n \n $\"Deloitte\"$ \n \n \n \n \n $\"Nederlandse$ \n \n \n \n \n $\"ONVZ\"$ \n \n \n \n \n $\"Rabobank\"$ \n \n \n \n \n $\"Volvo$ \n \n \n \n \n \n \n \n