- 
-
-
-
-
-
- Het Sloterstrand is gelegen in de gemeente Amsterdam, in het stadsdeel Nieuw West. De plas is in zijn huidige vorm in de jaren vijftig door zandwinning ontstaan, beslaat 89 hectare en is maximaal circa 35 meter diep. Aan de west- en oostzijde van de plas liggen stadsparken. De oevers rondom het Sloterstrand zijn verschillend van aard. Aan de zuidzijde (langs de Lelylaan en het Osdorpplein) en aan de noordoostzijde (bij het paviljoen) is een hoge en harde oever waarlangs geen enkele plantengroei aanwezig is. Aan de zuidrand wordt het strand begrensd door een brede boulevard met bankjes. Vooral aan de oostkant van de plas en in mindere mate ook bij het westelijke parkgebied zijn meer natuurlijke oevers met een begroeiing.
-Het Sloterstrand is gelegen in de gemeente Amsterdam, in het stadsdeel Nieuw West. De - plas is in zijn huidige vorm in de jaren vijftig door zandwinning ontstaan, beslaat 89 hectare en is maximaal - circa 35 meter diep. Aan de west- en oostzijde van de plas liggen stadsparken. De oevers rondom het Sloterstrand - zijn verschillend van aard. Aan de zuidzijde (langs de Lelylaan en het Osdorpplein) en aan de noordoostzijde - (bij het paviljoen) is een hoge en harde oever waarlangs geen enkele plantengroei aanwezig is. Aan de zuidrand - wordt het strand begrensd door een brede boulevard met bankjes. Vooral aan de oostkant van de plas en in mindere - mate ook bij het westelijke parkgebied zijn meer natuurlijke oevers met een begroeiing.
-Het Sloterstrand is gelegen in de gemeente Amsterdam, in het stadsdeel Nieuw West. De - plas is in zijn huidige vorm in de jaren vijftig door zandwinning ontstaan, beslaat 89 hectare en is maximaal - circa 35 meter diep. Aan de west- en oostzijde van de plas liggen stadsparken. De oevers rondom het Sloterstrand - zijn verschillend van aard. Aan de zuidzijde (langs de Lelylaan en het Osdorpplein) en aan de noordoostzijde - (bij het paviljoen) is een hoge en harde oever waarlangs geen enkele plantengroei aanwezig is. Aan de zuidrand - wordt het strand begrensd door een brede boulevard met bankjes. Vooral aan de oostkant van de plas en in mindere - mate ook bij het westelijke parkgebied zijn meer natuurlijke oevers met een begroeiing.
-{state.placename}
+{state.description}
+Zwemmen ontraden vanwege blauwalgen. Grote kans op huidirritatie en maag-/darmklachten.
+Huidige kwaliteit
+ {/*{state.current_status}
*/} +Meerjarige kwaliteit
+★★★
+E.Coli
+Enterococcen (IE)
++ Onbekend +
) + } + + if (state.includes("goed")) { + return ( +Goed
+ ) + } else if (state == "NADER_ONDERZOEK") { + return ( +Nader onderzoek
+ ) + } else if (state == "WAARSCHUWING") { + return ( +Waarschuwing
+ ) + } else { + return ( +Zwemverbod
+ ) + } +} + +function IntEnt({ amount }) { + if (amount < 200) { + return ({amount}
) + } + + if (amount > 330) { + return ({amount}
) + } + + return ({amount}
) +} + +function EColi({amount}){ + if (amount < 200){ + return ({amount}
) + } + + if (amount > 900){ + return ({amount}
) + } + + return ({amount}
) +} + +IntEnt.propTypes = { + amount: PropTypes.number +} + +EColi.propTypes = { + amount: PropTypes.number +} + +Status.propTypes = { + state: PropTypes.string +} + + +export default Details; \ No newline at end of file diff --git a/src/Header.css b/src/Header.css new file mode 100644 index 0000000..35f2173 --- /dev/null +++ b/src/Header.css @@ -0,0 +1,41 @@ +#header { + display: block; + padding-left: 1em; + padding-right: 1em; + background-color: var(--brand); + color: white; + + a { + text-decoration: none; + color: white; + } + + .logo { + margin-right: 1rem; + width: 2.5lh; + height: 1.75rem; + } + + .title { + display: block; + padding-top: 1rem; + padding-bottom: 1rem; + h1 { + all: unset; + font-weight: 600; + font-size: 2.2rem; + } + } +} + +@media (max-width: 768px) { + #header { + .title { + h1 { + font-size: 1.75rem; + } + padding-top: 0.5rem; + padding-bottom: 0.5rem; + } + } +} diff --git a/src/Header.jsx b/src/Header.jsx new file mode 100644 index 0000000..682e19e --- /dev/null +++ b/src/Header.jsx @@ -0,0 +1,22 @@ +import './Header.css' +import logo from './assets/logo.svg' + +import { Link } from "react-router-dom"; + +function Header() { + return ( + <> +Gebaseerd op open data
van zwemplekken in heel Europa
{placename}
+${item.current_status}
-${item.amenities}
-