1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
import { FC } from 'react';
import List, { type ListItem, type ListProps } from '../../atoms/lists/list';
import Card, { type CardProps } from '../../molecules/layout/card';
import styles from './cards-list.module.scss';
export type CardsListItem = Omit<CardProps, 'className' | 'titleLevel'> & {
/**
* The card id.
*/
id: string;
};
export type CardsListProps = Pick<CardProps, 'titleLevel'> &
Pick<ListProps, 'kind'> & {
/**
* Set additional classnames to the list wrapper.
*/
className?: string;
/**
* The cards data.
*/
items: CardsListItem[];
};
/**
* CardsList component
*
* Return a list of Card components.
*/
const CardsList: FC<CardsListProps> = ({
className = '',
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}
className={styles.card}
id={id}
titleLevel={titleLevel}
{...card}
/>
),
};
});
};
return (
<List
kind="flex"
items={getCards(items)}
className={`${styles.wrapper} ${styles[kindModifier]} ${className}`}
/>
);
};
export default CardsList;
|
