feat: add container component

packages/components/all/src/container/index.module.scss

@@ -0,0 +1,26 @@
+.root {
+  --spacing-y: 0;
+  --spacing-x: 0;
+
+  box-sizing: border-box;
+  max-width: var(--max-width);
+  padding: var(--spacing-y) var(--spacing-x);
+  margin: 0 auto;
+}
+
+.horizontal {
+  --max-width: 1300px;
+  --spacing-x: 50px;
+
+  .small {
+    color: red;
+  }
+}
+
+.vertical {
+  --spacing-y: 30px;
+
+  .small {
+    --spacing-y: 16px;
+  }
+}

packages/components/all/src/container/index.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import styles from "./index.module.scss";
+import classNames from "classnames";
+
+type ContainerVariation = "horizontal" | "vertical" | "small";
+
+interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  variation?: ContainerVariation | ContainerVariation[];
+}
+
+export const Container = ({
+  variation = "horizontal",
+  className,
+  ...otherProps
+}: Readonly<ContainerProps>): React.ReactElement => {
+  const computedVariations = Array.isArray(variation) ? variation : [variation];
+
+  return (
+    <div
+      className={classNames(
+        styles.root,
+        className,
+        computedVariations.map((i) => styles[i]),
+      )}
+      {...otherProps}
+    />
+  );
+};