scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add cva

Browse Source
This commit is contained in:
Christel Westerberg
2024-02-12 13:39:43 +01:00
parent c580117762
commit 9757f5dda9
4 changed files with 104 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
components/Current/Blocks/List/ListItem.tsx Normal file
View File

@@ -0,0 +1,81 @@
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>
<br />
<span>{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>
<br />
<span>{listItem.list_item_internal_link.subtitle}</span>
</li>
)
default:
return null
}
}

79
components/Current/Blocks/List/index.tsx
View File

@@ -1,8 +1,7 @@
import { BlockListItemsEnum } from "@/types/requests/blocks/list"
import type { ListProps, ListItem } from "@/types/requests/blocks/list"
import type { ListProps } from "@/types/requests/blocks/list"
import styles from "./list.module.css"
import Link from "next/link"
import ListItem from "./ListItem"
export default function List({ list }: ListProps) {
return (
@@ -16,77 +15,3 @@ export default function List({ list }: ListProps) {
</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 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={` ${
listItem.list_item_internal_link.list_item_style === "checkmark"
? styles.checkmark
: styles.disc
}
${styles.listItem}
`}
>
<Link href={linkUrlWithLocale} className={styles.link}>
{listItem.list_item_internal_link.link_text}
</Link>
<br />
<span>{listItem.list_item_internal_link.subtitle}</span>
</li>
)
default:
return null
}
}