diff options
Diffstat (limited to 'src/components/organisms/images/gallery.tsx')
| -rw-r--r-- | src/components/organisms/images/gallery.tsx | 35 |
1 files changed, 35 insertions, 0 deletions
diff --git a/src/components/organisms/images/gallery.tsx b/src/components/organisms/images/gallery.tsx new file mode 100644 index 0000000..6c4a271 --- /dev/null +++ b/src/components/organisms/images/gallery.tsx @@ -0,0 +1,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; |
