refactor(components): rewrite List component

* change `items` prop to children
* replace `kind` prop with `isHierarchical`, `isOrdered` & `isInline` props
* add `hideMarker` prop
* add `spacing` prop to control item spacing
* move lists styles to Sass placeholders to avoid repeats because of
headless WordPress

1 files changed, 23 insertions, 0 deletions

diff --git a/src/pages/projets/[slug].tsx b/src/pages/projets/[slug].tsx
index 717ae13..89891b3 100644
--- a/src/pages/projets/[slug].tsx
+++ b/src/pages/projets/[slug].tsx
@@ -23,6 +23,8 @@ import {
   Spinner,
   type MetaData,
   Heading,
+  List,
+  ListItem,
 } from '../../components';
 import styles from '../../styles/pages/project.module.scss';
 import type { NextPageWithLayout, ProjectPreview, Repos } from '../../types';
@@ -99,6 +101,24 @@ const H6 = ({
   </Heading>
 );
 
+const OrderedList = ({
+  children,
+  ...props
+}: HTMLAttributes<HTMLUListElement>) => (
+  <List {...props} isOrdered spacing="2xs">
+    {children}
+  </List>
+);
+
+const UnorderedList = ({
+  children,
+  ...props
+}: HTMLAttributes<HTMLUListElement>) => (
+  <List {...props} spacing="2xs">
+    {children}
+  </List>
+);
+
 const components: MDXComponents = {
   Code,
   Gallery,
@@ -109,7 +129,10 @@ const components: MDXComponents = {
   h5: H5,
   h6: H6,
   Image: BorderedImage,
+  li: ListItem,
   Link,
+  ol: OrderedList,
+  ul: UnorderedList,
 };
 
 type ProjectPageProps = {