From 1d35c5382009d6a8405db18f725355b706a79d8b Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <256895@studenti.unimore.it>
Date: Wed, 21 Apr 2021 00:35:44 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20base=20Box=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 code/frontend/src/App.js                    | 12 ++++++++++--
 code/frontend/src/components/Box.js         | 15 +++++++++++++++
 code/frontend/src/components/Box.module.css |  7 +++++++
 3 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 code/frontend/src/components/Box.js
 create mode 100644 code/frontend/src/components/Box.module.css

diff --git a/code/frontend/src/App.js b/code/frontend/src/App.js
index 9fda99e..593efa9 100644
--- a/code/frontend/src/App.js
+++ b/code/frontend/src/App.js
@@ -1,14 +1,22 @@
 import {useState} from "react"
 import classNames from "classnames"
 import Style from "./App.module.css"
+import Box from "./components/Box"
 
 
 export default function App() {
-    const [theme, setTheme] = useState("theme-dark");
+    const [theme, ] = useState("theme-dark");
 
     return (
         <div className={classNames(Style["app"], theme)}>
-            Ciao mondo!
+            <Box direction={"column"}>
+                <div>
+                    Ciao
+                </div>
+                <div>
+                    mondo!
+                </div>
+            </Box>
         </div>
     )
 }
diff --git a/code/frontend/src/components/Box.js b/code/frontend/src/components/Box.js
new file mode 100644
index 0000000..f7fe631
--- /dev/null
+++ b/code/frontend/src/components/Box.js
@@ -0,0 +1,15 @@
+import React from "react"
+import Style from "./Box.module.css"
+import classNames from "classnames"
+
+
+export default function Box({ children, className, ...props }) {
+    return (
+        <div
+            className={classNames(Style.Box, className)}
+            {...props}
+        >
+            {children}
+        </div>
+    )
+}
diff --git a/code/frontend/src/components/Box.module.css b/code/frontend/src/components/Box.module.css
new file mode 100644
index 0000000..81f8966
--- /dev/null
+++ b/code/frontend/src/components/Box.module.css
@@ -0,0 +1,7 @@
+.Box {
+    display: flex;
+
+    background-color: var(--bg-light);
+    border-radius: 999999px;
+}
+