blob: 1558d7ca46bf850405eca3657e02d870b7b517fb (
plain)
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
import List, {
type ListItem,
type ListProps,
} from '@components/atoms/lists/list';
import Card, { type CardProps } from '@components/molecules/layout/card';
import { FC } from 'react';
import styles from './cards-list.module.scss';
export type CardsListItem = Omit<
CardProps,
'className' | 'coverFit' | 'titleLevel'
> & {
id: string;
};
export type CardsListProps = {
/**
* Set additional classnames to the list wrapper.
*/
className?: string;
/**
* 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: FC<CardsListProps> = ({
className = '',
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
kind="flex"
items={getCards(items)}
withMargin={false}
className={`${styles.wrapper} ${styles[kindModifier]} ${className}`}
/>
);
};
export default CardsList;
|
