Fetch open hours from Klapi

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<OpenHoursData | null>(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 (
     <>
-      <p className={styles.openHoursText}>ma-la 12:00-19:00</p>
+      {paragraphs.map((text, i) => (
-      <p className={styles.openHoursText}>su suljettu</p>
+        <p key={i} className={styles.openHoursText}>{text}</p>
-      {/* 
+      ))}
-      Only during summer season 
+      {kitchenNotice && data?.kitchenNotice && (
-      <p className={styles.openHoursDesc}>
+        <p className={styles.kitchenNotice}>{data.kitchenNotice}</p>
-        pe-la 9:00-21:00
+      )}
-      </p>
-      {kitchenNotice && (<p className={styles.openHoursDesc}>Keittiö auki joka päivä <br /> klo 12:00-19:00</p>)}
-      */}
-
 
       <h2 className={styles.openHoursTitle}>Tervetuloa!</h2>
     </>

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 {