From 872b0c172a38db4f440dc6044eb1d5725c03abb1 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 13 Apr 2022 19:34:49 +0200
Subject: chore: add a CardsList component

---
 src/components/organisms/layout/cards-list.tsx | 80 ++++++++++++++++++++++++++
 1 file changed, 80 insertions(+)
 create mode 100644 src/components/organisms/layout/cards-list.tsx

(limited to 'src/components/organisms/layout/cards-list.tsx')

diff --git a/src/components/organisms/layout/cards-list.tsx b/src/components/organisms/layout/cards-list.tsx
new file mode 100644
index 0000000..a53df0d
--- /dev/null
+++ b/src/components/organisms/layout/cards-list.tsx
@@ -0,0 +1,80 @@
+import List, {
+  type ListItem,
+  type ListProps,
+} from '@components/atoms/lists/list';
+import Card, { type CardProps } from '@components/molecules/layout/card';
+import { VFC } from 'react';
+import styles from './cards-list.module.scss';
+
+export type CardsListItem = Omit<
+  CardProps,
+  'className' | 'coverFit' | 'titleLevel'
+> & {
+  id: string;
+};
+
+export type CardsListProps = {
+  /**
+   * The cover fit.
+   */
+  coverFit?: CardProps['coverFit'];
+  /**
+   * The cards data.
+   */
+  items: CardsListItem[];
+  /**
+   * The list kind. Either ordered or unordered.
+   */
+  kind?: ListProps['kind'];
+  /**
+   * The title level (hn).
+   */
+  titleLevel: CardProps['titleLevel'];
+};
+
+/**
+ * CardsList component
+ *
+ * Return a list of Card components.
+ */
+const CardsList: VFC<CardsListProps> = ({
+  coverFit,
+  items,
+  kind = 'unordered',
+  titleLevel,
+}) => {
+  const kindModifier = `wrapper--${kind}`;
+
+  /**
+   * Format the cards data to be used by the List component.
+   *
+   * @param {CardsListItem[]} cards - An array of card data.
+   * @returns {ListItem[]} The formatted cards data.
+   */
+  const getCards = (cards: CardsListItem[]): ListItem[] => {
+    return cards.map(({ id, ...card }) => {
+      return {
+        id,
+        value: (
+          <Card
+            key={id}
+            coverFit={coverFit}
+            titleLevel={titleLevel}
+            className={styles.card}
+            {...card}
+          />
+        ),
+      };
+    });
+  };
+
+  return (
+    <List
+      items={getCards(items)}
+      withMargin={false}
+      className={`${styles.wrapper} ${styles[kindModifier]}`}
+    />
+  );
+};
+
+export default CardsList;
-- 
cgit v1.2.3