94 lines
2.7 KiB
TypeScript
94 lines
2.7 KiB
TypeScript
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
|
|
}
|
|
}
|