summaryrefslogtreecommitdiffstats
path: root/src/components/organisms/images/gallery.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/organisms/images/gallery.tsx')
-rw-r--r--src/components/organisms/images/gallery.tsx35
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;