add support for opening hours that automatically change over time

web/src/components/blocks/OpeningHoursSectionBlock.tsx

@@ -0,0 +1,66 @@
+import {
+  getOpeningHours,
+  getOpeningHoursForFunction,
+  getPrettyOpeningHoursForFunction,
+  groupOpeningHours,
+  PrettyOpeningHours,
+} from "@/lib/openinghours";
+import styles from "./openingHoursSectionBlock.module.scss";
+
+function OpeningHoursSubsection({
+  title,
+  prettyHours,
+}: {
+  title: string;
+  prettyHours: PrettyOpeningHours[];
+}) {
+  return (
+    <section className={styles.openingHoursSubsection}>
+      <h3>{title}</h3>
+      <ul>
+        {prettyHours.map(({ range, time, custom }) => (
+          <li key={range}>
+            <span className={styles.dayRange}>{range}</span>:&nbsp;
+            {time && <span className={styles.timeRange}>{time}</span>}
+            {custom && <span className={styles.timeRange}>{custom}</span>}
+            {!time && !custom && <span className={styles.closed}>Stengt</span>}
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+export async function OpeningHoursSectionBlock() {
+  const allOpeningHours = await getOpeningHours();
+  const subsections = [
+    ["glassbaren", "Glassbaren"],
+    ["bokcafeen", "Bokcaféen"],
+    ["ekspedisjonen", "Ekspedisjonen"],
+  ];
+  const { announcement } = allOpeningHours;
+
+  return (
+    <section className={styles.openingHoursSection}>
+      {announcement && <p>{announcement}</p>}
+      {subsections.map((subsection) => {
+        const [slug, title] = subsection;
+        const prettyHours = getPrettyOpeningHoursForFunction(
+          allOpeningHours,
+          slug
+        );
+        console.log("prettyHours", prettyHours, slug);
+        if (!prettyHours || prettyHours?.length === 0) {
+          return <></>;
+        }
+        return (
+          <OpeningHoursSubsection
+            key={slug}
+            title={title}
+            prettyHours={prettyHours}
+          />
+        );
+      })}
+    </section>
+  );
+}