feat: add list block component

components/Current/Blocks.tsx

@@ -16,7 +16,7 @@ export default function Blocks({ blocks }: BlocksProps) {
         const type = block.__typename
         switch (type) {
           case BlocksTypenameEnum.CurrentBlocksPageBlocksList:
-            return <List key={block.__typename} {...block} />
+            return <List key={block.__typename} listBlock={block} />
           case BlocksTypenameEnum.CurrentBlocksPageBlocksPuffs:
             return <Puffs key={block.__typename} {...block} />
           case BlocksTypenameEnum.CurrentBlocksPageBlocksText:

components/Current/Blocks/List.tsx

@@ -1,7 +0,0 @@
-export default function List() {
-  return (
-    <>
-
-    </>
-  )
-}

components/Current/Blocks/List/index.tsx

@@ -0,0 +1,93 @@
+import { BlockListItemsEnum } from "@/types/requests/blocks/list"
+import type { ListProps, ListItem } from "@/types/requests/blocks/list"
+
+import styles from "./list.module.css"
+import Link from "next/link"
+
+export default function List({ listBlock }: ListProps) {
+  return (
+    <div>
+      {listBlock.list.title ? (
+        <h2 className={styles.title}>{listBlock.list.title}</h2>
+      ) : null}
+      <ul className={styles.ul}>
+        {listBlock.list.list_items.map((item, i) => (
+          <ListItem listItem={item} key={`list-item-${i}`} />
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+function ListItem({ listItem }: { listItem: ListItem }) {
+  const typeName = listItem.__typename
+
+  switch (typeName) {
+    case BlockListItemsEnum.CurrentBlocksPageBlocksListBlockListItemsListItem:
+      return (
+        <li
+          className={` ${
+            listItem.list_item.list_item_style === "checkmark"
+              ? styles.checkmark
+              : styles.disc
+          }
+          ${styles.listItem}
+          `}
+        >
+          {listItem.list_item.subtitle ? (
+            <>
+              <strong>{listItem.list_item.title}</strong>
+              <br />
+              <span>{listItem.list_item.subtitle}</span>
+            </>
+          ) : (
+            listItem.list_item.title
+          )}
+        </li>
+      )
+    case BlockListItemsEnum.CurrentBlocksPageBlocksListBlockListItemsListItemExternalLink:
+      return (
+        <li
+          className={` ${
+            listItem.list_item_external_link.list_item_style === "checkmark"
+              ? styles.checkmark
+              : styles.disc
+          }
+          ${styles.listItem}
+          `}
+        >
+          <a
+            className={styles.link}
+            href={listItem.list_item_external_link.link.href}
+          >
+            <strong>{listItem.list_item_external_link.link.title}</strong>
+          </a>
+          <br />
+          <span>{listItem.list_item_external_link.subtitle}</span>
+        </li>
+      )
+    case BlockListItemsEnum.CurrentBlocksPageBlocksListBlockListItemsListItemInternalLink:
+      const links = listItem.list_item_internal_link.pageConnection.edges
+      return links.map((link, i) => (
+        <li
+          key={link.node.system.uid}
+          className={` ${
+            listItem.list_item_internal_link.list_item_style === "checkmark"
+              ? styles.checkmark
+              : styles.disc
+          }
+        ${styles.listItem}
+        `}
+        >
+          <Link href={link.node.url} className={styles.link}>
+            {listItem.list_item_internal_link.link_text}
+          </Link>
+          <br />
+          <span>{listItem.list_item_internal_link.subtitle}</span>
+        </li>
+      ))
+
+    default:
+      return null
+  }
+}

components/Current/Blocks/List/list.module.css

@@ -0,0 +1,65 @@
+.title {
+    font-family: Helvetica, Arial, sans-serif;
+    font-weight: 400;
+    line-height: normal;
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    text-decoration: none;
+    text-transform: none;
+}
+
+.ul {
+    margin-bottom: 15px;
+}
+
+.listItem {
+    margin-bottom: 8px;
+    padding-left: 1.3em;
+}
+
+.checkmark {
+    padding-left: 1.6em;
+}
+
+.checkmark::before, .disc::before {
+    position:relative;
+    top: 4px;
+    display: inline-block;
+    height: 0px;
+    width: 0px;
+}
+
+.checkmark::before {
+    content: url('/Static/img/bullet-list-tick-birch-v2.svg');
+    transform: scale(.9);
+    left: -1.2em;
+}
+
+.disc::before {
+    content: "•";
+    color: rgb(157, 160, 161);
+    font-size: 26px;
+    left: -0.7em;
+}
+
+.link {
+    border-bottom: 1px dotted #00838e;
+    color: #00838e;
+    text-decoration: none;
+    background-color: transparent;
+}
+
+.link:active, .link:hover {
+    text-decoration: underline;
+    outline: 0;
+}
+
+.link:hover {
+    border-bottom: none;
+}
+
+@media screen and (min-width: 950px) {
+.title {
+    font-size: 1.375rem;
+  }
+}

types/requests/blocks/list.ts

@@ -1,6 +1,7 @@
 import type { Edges } from "../utils/edges"
 import type { ExternalLink } from "../utils/externalLink"
 import type { PageLink } from "../utils/pageLink"
+import { Typename } from "../utils/typename"
 
 enum ListItemStyleEnum {
   checkmark = "checkmark",
@@ -9,38 +10,62 @@ enum ListItemStyleEnum {
 
 type ListItemStyle = keyof typeof ListItemStyleEnum
 
-type ExternalLinkListItem = {
+export enum BlockListItemsEnum {
-  list_item_external_link: {
+  CurrentBlocksPageBlocksListBlockListItemsListItem = "CurrentBlocksPageBlocksListBlockListItemsListItem",
-    link: {
+  CurrentBlocksPageBlocksListBlockListItemsListItemExternalLink = "CurrentBlocksPageBlocksListBlockListItemsListItemExternalLink",
-      href: string
+  CurrentBlocksPageBlocksListBlockListItemsListItemInternalLink = "CurrentBlocksPageBlocksListBlockListItemsListItemInternalLink",
+}
+
+type ExternalLinkListItem = Typename<
+  {
+    list_item_external_link: {
+      link: {
+        href: string
+        title: string
+      }
+      list_item_style: ListItemStyle
+      subtitle?: string
+    }
+  },
+  BlockListItemsEnum.CurrentBlocksPageBlocksListBlockListItemsListItemExternalLink
+>
+
+type InternalLinkListItem = Typename<
+  {
+    list_item_internal_link: {
+      link_text?: string
+      list_item_style: ListItemStyle
+      subtitle?: string
+      pageConnection: Edges<ExternalLink | PageLink>
+    }
+  },
+  BlockListItemsEnum.CurrentBlocksPageBlocksListBlockListItemsListItemInternalLink
+>
+
+type RegularListItem = Typename<
+  {
+    list_item: {
+      list_item_style: ListItemStyle
+      subtitle?: string
       title: string
     }
-    list_item_style: ListItemStyle
+  },
-    subtitle?: string
+  BlockListItemsEnum.CurrentBlocksPageBlocksListBlockListItemsListItem
-  }
+>
-}
 
-type InternalLinkListItem = {
+export type ListItem =
-  list_item_internal_link: {
+  | ExternalLinkListItem
-    link_text?: string
+  | InternalLinkListItem
-    list_item_style: ListItemStyle
+  | RegularListItem
-    subtitle?: string
-    pageConnection: Edges<ExternalLink | PageLink>
-  }
-}
-
-type RegularListItem = {
-  list_item: {
-    list_item_style: ListItemStyle
-    subtitle?: string
-    title: string
-  }
-}
-
-type ListItem = ExternalLinkListItem | InternalLinkListItem | RegularListItem
 
 export type List = {
   list: {
-    list_items: ListItem
+    title?: string
+    list_items: ListItem[]
   }
 }
+
+
+export type ListProps = {
+  listBlock: List
+}