92 lines
2.6 KiB
TypeScript
92 lines
2.6 KiB
TypeScript
import Link from "next/link"
|
|
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>
|
|
)
|
|
case BlockListItemsEnum.CurrentBlocksPageBlocksListBlockListItemsListItemInternalLink:
|
|
const link = listItem.list_item_internal_link.pageConnection.edges[0]
|
|
const linkUrlWithLocale = `/${link.node.system.locale}${link.node.url}`
|
|
return (
|
|
<li
|
|
key={link.node.system.uid}
|
|
className={listItemStyle({
|
|
type: listItem.list_item_internal_link.list_item_style,
|
|
})}
|
|
>
|
|
<Link href={linkUrlWithLocale} className={styles.link}>
|
|
{listItem.list_item_internal_link.link_text}
|
|
</Link>
|
|
{listItem.list_item_internal_link.subtitle && (
|
|
<span>
|
|
<br />
|
|
{listItem.list_item_internal_link.subtitle}
|
|
</span>
|
|
)}
|
|
</li>
|
|
)
|
|
|
|
default:
|
|
return null
|
|
}
|
|
}
|