blob: 6c4a271a998d94cfbd87836ecb9c48ac5888b99f (
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 { type ResponsiveImageProps } from '@components/molecules/images/responsive-image';
import { Children, FC, ReactElement } from 'react';
import styles from './gallery.module.scss';
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.
*/
const Gallery: FC<GalleryProps> = ({ children, columns }) => {
const columnsClass = `wrapper--${columns}-columns`;
return (
<ul className={`${styles.wrapper} ${styles[columnsClass]}`}>
{Children.map(children, (child) => {
return <li className={styles.item}>{child}</li>;
})}
</ul>
);
};
export default Gallery;
|
