From a4a406463d69f6901919d273e831dff22a838caf Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 19 Apr 2022 12:07:21 +0200
Subject: chore: add a Gallery component

---
 src/components/organisms/images/gallery.tsx | 35 +++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 src/components/organisms/images/gallery.tsx

(limited to 'src/components/organisms/images/gallery.tsx')

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;
-- 
cgit v1.2.3