refactor editos

src/components/common/Grid/index.tsx

@@ -0,0 +1,56 @@
+import React, { FC } from 'react';
+
+import classNames from 'classnames';
+
+import styles from './styles.module.scss';
+
+type IProps = React.HTMLAttributes<HTMLDivElement> & {
+  horizontal?: boolean;
+  vertical?: boolean;
+  columns?: string;
+  rows?: string;
+  size?: string;
+  square?: boolean;
+  gap?: number;
+  stretchy?: boolean;
+};
+
+const Grid: FC<IProps> = ({
+  children,
+  className = '',
+  horizontal = false,
+  vertical = false,
+  square = false,
+  size = 'auto',
+  style = {},
+  columns = 'auto',
+  rows = 'auto',
+  gap = 10,
+  stretchy,
+  ...props
+}) => (
+  <div
+    className={classNames(styles.grid, className, {
+      [styles.horizontal]: horizontal,
+      [styles.vertical]: !horizontal,
+      [styles.square]: square,
+      [styles.stretchy]: stretchy,
+    })}
+    style={{
+      ...style,
+      gridTemplateColumns: square
+        ? `repeat(auto-fill, ${(columns !== 'auto' && columns) || size})`
+        : columns,
+      gridTemplateRows: square ? `repeat(auto-fill, ${(rows !== 'auto' && rows) || size})` : rows,
+      gridAutoRows: rows,
+      gridAutoColumns: columns,
+      gridRowGap: gap,
+      gridColumnGap: gap,
+    }}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+export { Grid };

src/components/common/Grid/styles.module.scss

@@ -0,0 +1,24 @@
+@import "src/styles/variables";
+
+.grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  grid-row-gap: $gap;
+  grid-column-gap: $gap;
+  grid-auto-flow: row;
+  grid-auto-rows: auto;
+  grid-auto-columns: auto;
+
+  &.horizontal {
+    grid-auto-flow: column;
+  }
+
+  &.square {
+    grid-auto-flow: dense;
+  }
+
+  &.stretchy {
+    flex: 1;
+  }
+}