refactor: use storybook and atomic design (#16)

BREAKING CHANGE: rewrite most of the Typescript types, so the content format (the meta in particular) needs to be updated.

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;