blob: b35acfe2513fa16424e586c9414e720c5be1b531 (
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
|
import { Children, type FC, type ReactElement } from 'react';
import { List, ListItem } from '../../atoms';
import type { ResponsiveImageProps } from '../../molecules';
import styles from './gallery.module.scss';
// eslint-disable-next-line @typescript-eslint/no-magic-numbers
export type GalleryColumn = 2 | 3 | 4;
export type GalleryProps = {
/**
* The images using ResponsiveImage component.
*/
children: ReactElement<ResponsiveImageProps>[];
/**
* The columns count.
*/
columns: GalleryColumn;
};
/**
* Gallery component
*
* Render a gallery of images.
*/
export const Gallery: FC<GalleryProps> = ({ children, columns }) => {
const columnsClass = `wrapper--${columns}-columns`;
return (
<List className={`${styles.wrapper} ${styles[columnsClass]}`} hideMarker>
{Children.map(children, (child) => (
<ListItem className={styles.item}>{child}</ListItem>
))}
</List>
);
};
|
