diff --git a/components/Current/Blocks.tsx b/components/Current/Blocks.tsx
index dc90c952f..04e138e43 100644
--- a/components/Current/Blocks.tsx
+++ b/components/Current/Blocks.tsx
@@ -16,7 +16,7 @@ export default function Blocks({ blocks }: BlocksProps) {
const type = block.__typename
switch (type) {
case BlocksTypenameEnum.CurrentBlocksPageBlocksList:
- return
+ return
case BlocksTypenameEnum.CurrentBlocksPageBlocksPuffs:
return
case BlocksTypenameEnum.CurrentBlocksPageBlocksText:
diff --git a/components/Current/Blocks/List.tsx b/components/Current/Blocks/List.tsx
deleted file mode 100644
index 4cdb5ac56..000000000
--- a/components/Current/Blocks/List.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function List() {
- return (
- <>
-
- >
- )
-}
diff --git a/components/Current/Blocks/List/index.tsx b/components/Current/Blocks/List/index.tsx
new file mode 100644
index 000000000..7a236bc4d
--- /dev/null
+++ b/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 (
+
+ {listBlock.list.title ? (
+
{listBlock.list.title}
+ ) : null}
+
+ {listBlock.list.list_items.map((item, i) => (
+
+ ))}
+
+
+ )
+}
+
+function ListItem({ listItem }: { listItem: ListItem }) {
+ const typeName = listItem.__typename
+
+ switch (typeName) {
+ case BlockListItemsEnum.CurrentBlocksPageBlocksListBlockListItemsListItem:
+ return (
+
+ {listItem.list_item.subtitle ? (
+ <>
+ {listItem.list_item.title}
+
+ {listItem.list_item.subtitle}
+ >
+ ) : (
+ listItem.list_item.title
+ )}
+
+ )
+ case BlockListItemsEnum.CurrentBlocksPageBlocksListBlockListItemsListItemExternalLink:
+ return (
+
+
+ {listItem.list_item_external_link.link.title}
+
+
+ {listItem.list_item_external_link.subtitle}
+
+ )
+ case BlockListItemsEnum.CurrentBlocksPageBlocksListBlockListItemsListItemInternalLink:
+ const links = listItem.list_item_internal_link.pageConnection.edges
+ return links.map((link, i) => (
+
+
+ {listItem.list_item_internal_link.link_text}
+
+
+ {listItem.list_item_internal_link.subtitle}
+
+ ))
+
+ default:
+ return null
+ }
+}
diff --git a/components/Current/Blocks/List/list.module.css b/components/Current/Blocks/List/list.module.css
new file mode 100644
index 000000000..be9aebcaf
--- /dev/null
+++ b/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;
+ }
+}
\ No newline at end of file
diff --git a/types/requests/blocks/list.ts b/types/requests/blocks/list.ts
index 05f74a200..c9d05cdd1 100644
--- a/types/requests/blocks/list.ts
+++ b/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 = {
- list_item_external_link: {
- link: {
- href: string
+export enum BlockListItemsEnum {
+ CurrentBlocksPageBlocksListBlockListItemsListItem = "CurrentBlocksPageBlocksListBlockListItemsListItem",
+ CurrentBlocksPageBlocksListBlockListItemsListItemExternalLink = "CurrentBlocksPageBlocksListBlockListItemsListItemExternalLink",
+ 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
+ }
+ },
+ 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 = {
- list_item_internal_link: {
- link_text?: string
- list_item_style: ListItemStyle
- subtitle?: string
- pageConnection: Edges
- }
-}
-
-type RegularListItem = {
- list_item: {
- list_item_style: ListItemStyle
- subtitle?: string
- title: string
- }
-}
-
-type ListItem = ExternalLinkListItem | InternalLinkListItem | RegularListItem
+export type ListItem =
+ | ExternalLinkListItem
+ | InternalLinkListItem
+ | RegularListItem
export type List = {
list: {
- list_items: ListItem
+ title?: string
+ list_items: ListItem[]
}
}
+
+
+export type ListProps = {
+ listBlock: List
+}