add schedule block

web/src/components/blocks/Blocks.tsx

@@ -10,6 +10,7 @@ import { FeaturedBlock } from "./FeaturedBlock";
 import { AccordionBlock } from "./AccordionBlock";
 import { EmbedBlock } from "./EmbedBlock";
 import { FactBoxBlock } from "./FactBoxBlock";
+import { ScheduleBlock } from "./ScheduleBlock";
 import { PageSectionBlock, PageSectionNavigationBlock } from "./PageSection";
 import { ContactSectionBlock, ContactSubsectionBlock } from "./ContactSection";
 import { ContactListBlock } from "./ContactListBlock";
@@ -48,6 +49,9 @@ export const Blocks = ({ blocks, pageContent }: { blocks: any, pageContent?: boo
       case "FactBoxBlock":
         return <FactBoxBlock key={block.id} block={block} />;
         break;
+      case "ScheduleBlock":
+        return <ScheduleBlock key={block.id} block={block} />;
+        break;
       case "PageSectionBlock":
         return <PageSectionBlock key={block.id} block={block} />;
         break;

web/src/components/blocks/ScheduleBlock.tsx

@@ -0,0 +1,68 @@
+import { graphql, unmaskFragment } from "@/gql";
+import { type ScheduleBlockFragment } from "@/gql/graphql";
+import styles from "./scheduleBlock.module.scss";
+
+const ScheduleItemFragmentDefinition = graphql(`
+  fragment ScheduleItem on ScheduleItemBlock {
+    time
+    scheduleItemTitle: title
+    description
+  }
+`);
+
+export const ScheduleBlockFragmentDefinition = graphql(`
+  fragment ScheduleBlock on ScheduleBlock {
+    scheduleTitle: title
+    scheduleItems: items {
+      __typename
+      ... on ScheduleItemBlock {
+        ...ScheduleItem
+      }
+    }
+  }
+`);
+
+export const ScheduleBlock = ({
+  block,
+}: {
+  block: ScheduleBlockFragment;
+}) => {
+  return (
+    <section className={styles.schedule}>
+      {block.scheduleTitle && (
+        <h2 className={styles.title}>{block.scheduleTitle}</h2>
+      )}
+      <dl className={styles.items}>
+        {block.scheduleItems?.map((item, index) => {
+          if (item?.__typename !== "ScheduleItemBlock") {
+            return null;
+          }
+          const scheduleItem = unmaskFragment(
+            ScheduleItemFragmentDefinition,
+            item
+          );
+          return (
+            <div key={index} className={styles.item}>
+              <dt className={styles.time}>{scheduleItem.time}</dt>
+              <dd className={styles.body}>
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: scheduleItem.scheduleItemTitle,
+                  }}
+                />
+                {scheduleItem.description && (
+                  <div
+                    className={styles.description}
+                    dangerouslySetInnerHTML={{
+                      __html: scheduleItem.description,
+                    }}
+                  />
+                )}
+              </dd>
+            </div>
+          );
+        })}
+      </dl>
+    </section>
+  );
+};

web/src/components/blocks/scheduleBlock.module.scss

@@ -0,0 +1,37 @@
+.schedule {
+  max-width: var(--size-width-p);
+  margin: 0 auto var(--spacing-section-bottom);
+}
+
+.title {
+  margin: 0 0 var(--spacing-s);
+}
+
+.items {
+  margin: 0;
+}
+
+.item {
+  display: flex;
+  gap: var(--spacing-s);
+  padding: var(--spacing-xs) 0;
+  border-top: var(--border);
+
+  &:last-child {
+    border-bottom: var(--border);
+  }
+}
+
+.time {
+  flex: 0 0 8rem;
+  font-weight: 600;
+}
+
+.body {
+  margin: 0;
+}
+
+.description {
+  margin-top: var(--spacing-xs);
+  font-size: var(--font-size-caption);
+}