Files
web/components/Current/Blocks/List/ListItem.tsx
2024-02-22 16:33:00 +01:00

70 lines
1.8 KiB
TypeScript

import { cva } from "class-variance-authority"
import { BlockListItemsEnum } from "@/types/requests/blocks/list"
import type { ListItem } from "@/types/requests/blocks/list"
import styles from "./list.module.css"
const config = {
variants: {
type: {
default: styles.disc,
checkmark: styles.checkmark,
},
},
defaultVariants: {
type: "default",
},
} as const
const listItemStyle = cva(styles.listItem, config)
export default function ListItem({ listItem }: { listItem: ListItem }) {
const typeName = listItem.__typename
switch (typeName) {
case BlockListItemsEnum.CurrentBlocksPageBlocksListBlockListItemsListItem:
return (
<li
className={listItemStyle({
type: listItem.list_item.list_item_style,
})}
>
{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={listItemStyle({
type: listItem.list_item_external_link.list_item_style,
})}
>
<a
className={styles.link}
href={listItem.list_item_external_link.link.href}
>
<strong>{listItem.list_item_external_link.link.title}</strong>
</a>
{listItem.list_item_external_link.subtitle && (
<span>
<br />
{listItem.list_item_external_link.subtitle}
</span>
)}
</li>
)
default:
return null
}
}