diff --git a/components/OpenHours.tsx b/components/OpenHours.tsx index 4903a9f..11f1a57 100644 --- a/components/OpenHours.tsx +++ b/components/OpenHours.tsx @@ -1,23 +1,46 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import styles from '../styles/OpenHours.module.scss'; +type OpenHoursData = { + id: number; + name: string; + isActive: boolean; + version: string; + paragraph1: string; + paragraph2: string; + paragraph3: string; + paragraph4: string; + kitchenNotice: string; +}; + type OpenHoursProps = { kitchenNotice?: boolean; }; export const OpenHours = ({ kitchenNotice }: OpenHoursProps) => { + const [data, setData] = useState(null); + + useEffect(() => { + fetch('https://api.tietokonepaja.fi/lok/open-hours') + .then((res) => res.json()) + .then((items: OpenHoursData[]) => { + const active = items.find((item) => item.isActive) ?? null; + setData(active); + }); + }, []); + + const paragraphs = data + ? [data.paragraph1, data.paragraph2, data.paragraph3, data.paragraph4].filter(Boolean) + : []; + return ( <> -

ma-la 12:00-19:00

-

su suljettu

- {/* - Only during summer season -

- pe-la 9:00-21:00 -

- {kitchenNotice && (

Keittiö auki joka päivä
klo 12:00-19:00

)} - */} - + {paragraphs.map((text, i) => ( +

{text}

+ ))} + {kitchenNotice && data?.kitchenNotice && ( +

{data.kitchenNotice}

+ )}

Tervetuloa!

diff --git a/styles/OpenHours.module.scss b/styles/OpenHours.module.scss index ec74b7c..3698add 100644 --- a/styles/OpenHours.module.scss +++ b/styles/OpenHours.module.scss @@ -6,7 +6,13 @@ } .openHoursText { - margin-top: 0.5rem; + margin-top: 0.25rem; + margin-bottom: 0; +} + +.kitchenNotice { + margin-top: 0.75rem; + margin-bottom: 0; } .openHoursDesc {