src/components/MDX/Gallery/Gallery.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

import { Children, ReactElement } from 'react';
import styles from './Gallery.module.scss';

const Gallery = ({
  children,
  columns = 2,
}: {
  children: ReactElement;
  columns: number;
}) => {
  const columnClass = styles[`wrapper--${columns}-columns`];

  return (
    <ul className={`${styles.wrapper} ${columnClass}`}>
      {Children.map(children, (child) => {
        return <li className={styles.item}>{child}</li>;
      })}
    </ul>
  );
};

export default Gallery;