Create GameLayout component

src/components/game-area/game-layout.tsx

@@ -0,0 +1,31 @@
+import React, { FunctionComponent, PropsWithChildren } from "react";
+
+import styles from "./game-section.module.scss";
+
+export interface Props {
+  /**
+   * Top component prop
+   */
+  top: React.ReactNode;
+  /**
+   * Children = Main game area
+   */
+  children: React.ReactNode;
+}
+
+const WrapperContainer: FunctionComponent<PropsWithChildren> = ({ children }) => (
+  <div className={styles.wrapperContainer}>{children}</div>
+);
+
+const GameArea: FunctionComponent<PropsWithChildren> = ({ children }) => (
+  <div className={styles.gameArea}>{children}</div>
+);
+
+export const GameLayout: FunctionComponent<Props> = ({ top, children }) => {
+  return (
+    <WrapperContainer>
+      {top}
+      <GameArea>{children}</GameArea>
+    </WrapperContainer>
+  );
+};

src/components/game-area/game-section.module.scss

@@ -0,0 +1,16 @@
+.wrapperContainer {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.gameArea {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  border: 6px solid #e3e3e3;
+  background-color: #e3e3e3;
+}