diff --git a/src/components/game-area/game-layout.tsx b/src/components/game-area/game-layout.tsx new file mode 100644 index 00000000..7e3e183d --- /dev/null +++ b/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 = ({ children }) => ( +
{children}
+); + +const GameArea: FunctionComponent = ({ children }) => ( +
{children}
+); + +export const GameLayout: FunctionComponent = ({ top, children }) => { + return ( + + {top} + {children} + + ); +}; diff --git a/src/components/game-area/game-section.module.scss b/src/components/game-area/game-section.module.scss new file mode 100644 index 00000000..9dee8bbd --- /dev/null +++ b/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; +} diff --git a/src/components/game-area/game-section.tsx b/src/components/game-area/game-section.tsx new file mode 100644 index 00000000..e69de29b