feat: add cva

components/Current/Blocks/List/ListItem.tsx

@@ -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
+  }
+}

components/Current/Blocks/List/index.tsx

@@ -1,8 +1,7 @@
-import { BlockListItemsEnum } from "@/types/requests/blocks/list"
+import type { ListProps } 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"
+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
-  }
-}

package-lock.json

@@ -8,6 +8,7 @@
       "name": "web",
       "version": "0.1.0",
       "dependencies": {
+        "class-variance-authority": "^0.7.0",
         "graphql": "16.8.1",
         "graphql-request": "6.1.0",
         "graphql-tag": "2.12.6",
@@ -873,11 +874,30 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz",
+      "integrity": "sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==",
+      "dependencies": {
+        "clsx": "2.0.0"
+      },
+      "funding": {
+        "url": "https://joebell.co.uk"
+      }
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
+    "node_modules/clsx": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint && tsc"
   },
   "dependencies": {
+    "class-variance-authority": "^0.7.0",
     "graphql": "16.8.1",
     "graphql-request": "6.1.0",
     "graphql-tag": "2.12.6",