chore: add a LinksListWidget component

1 files changed, 81 insertions, 0 deletions

diff --git a/src/components/organisms/widgets/links-list-widget.tsx b/src/components/organisms/widgets/links-list-widget.tsx
new file mode 100644
index 0000000..155354e
--- /dev/null
+++ b/src/components/organisms/widgets/links-list-widget.tsx
@@ -0,0 +1,81 @@
+import Link from '@components/atoms/links/link';
+import List, { ListProps, type ListItem } from '@components/atoms/lists/list';
+import Widget, { type WidgetProps } from '@components/molecules/layout/widget';
+import { slugify } from '@utils/helpers/slugify';
+import { VFC } from 'react';
+import styles from './links-list-widget.module.scss';
+
+export type LinksListItems = {
+  /**
+   * An array of name/url couple child of this list item.
+   */
+  child?: LinksListItems[];
+  /**
+   * The item name.
+   */
+  name: string;
+  /**
+   * The item url.
+   */
+  url: string;
+};
+
+export type LinksListWidgetProps = Pick<WidgetProps, 'level' | 'title'> &
+  Pick<ListProps, 'kind'> & {
+    /**
+     * An array of name/url couple.
+     */
+    items: LinksListItems[];
+  };
+
+/**
+ * LinksListWidget component
+ *
+ * Render a list of links inside a widget.
+ */
+const LinksListWidget: VFC<LinksListWidgetProps> = ({
+  items,
+  kind = 'unordered',
+  ...props
+}) => {
+  const listKindClass = `list--${kind}`;
+
+  /**
+   * Format the widget data to be used as List items.
+   *
+   * @param {LinksListItems[]} data - The widget data.
+   * @returns {ListItem[]} The list items data.
+   */
+  const getListItems = (data: LinksListItems[]): ListItem[] => {
+    return data.map((item) => {
+      return {
+        id: slugify(item.name),
+        child: item.child && getListItems(item.child),
+        value: (
+          <Link href={item.url} className={styles.list__link}>
+            {item.name}
+          </Link>
+        ),
+      };
+    });
+  };
+
+  return (
+    <Widget
+      expanded={true}
+      withBorders={true}
+      className={styles.widget}
+      {...props}
+    >
+      <List
+        items={getListItems(items)}
+        kind={kind}
+        withMargin={false}
+        className={`${styles.list} ${styles[listKindClass]}`}
+        itemsClassName={styles.list__item}
+      />
+    </Widget>
+  );
+};
+
+export default LinksListWidget;