✨ Add BoxWithHeader component

code/frontend/src/App.js

@@ -1,22 +1,51 @@
 import {useState} from "react"
 import classNames from "classnames"
 import Style from "./App.module.css"
-import Box from "./components/Box"
+import BoxWithHeader from "./components/BoxWithHeader"
 
 
 export default function App() {
     const [theme, ] = useState("ThemeDark");
 
     return (
-        <div className={classNames(Style["app"], theme)}>
-            <Box direction={"column"}>
-                <div>
-                    Ciao
-                </div>
-                <div>
-                    mondo!
-                </div>
-            </Box>
+        <div className={classNames(Style.App, theme)}>
+            <BoxWithHeader
+                header={{
+                    children: "Ciao mondo!"
+                }}
+                body={{
+                    children: (
+                        <div>
+                            <div>
+                                Il CSS è pura magia.
+                            </div>
+                            <div>
+                                Change my mind.
+                            </div>
+                        </div>
+                    ),
+                }}
+            />
+            <BoxWithHeader
+                header={{
+                    children: "Questa è un'altra Box."
+                }}
+                body={{
+                    children: (
+                        <div>
+                            E altro testo.
+                        </div>
+                    )
+                }}
+            />
+            <BoxWithHeader
+                header={{
+                    children: "Ecco, così va meglio.",
+                }}
+                body={{
+                    children: "No."
+                }}
+            />
         </div>
     )
 }

code/frontend/src/App.module.css

@@ -1,6 +1,8 @@
-.app {
-    min-height: 100vh;
-    min-width: 100vw;
+.App {
+    height: 100vh;
+    width: 100vw;
+
+    padding: 16px;
 
     background-color: var(--bg-primary);
     color: var(--fg-primary);

code/frontend/src/components/BoxWithHeader.js

@@ -0,0 +1,17 @@
+import React from "react"
+import Style from "./BoxWithHeader.module.css"
+import classNames from "classnames"
+
+
+export default function BoxWithHeader({ header, body, className, ...props }) {
+    return (
+        <div className={classNames(Style.BoxWithHeader, className)} {...props}>
+            <div className={classNames(Style.BoxHeader, header.className)}>
+                {header.children}
+            </div>
+            <div className={classNames(Style.BoxBody, body.className)}>
+                {body.children}
+            </div>
+        </div>
+    )
+}

code/frontend/src/components/BoxWithHeader.module.css

@@ -0,0 +1,27 @@
+.BoxWithHeader {
+    margin: 25px;
+
+    display: flex;
+    flex-direction: column;
+}
+
+.BoxHeader {
+    padding: 10px 40px;
+    border-radius: 25px 25px 0 0;
+
+    background-color: var(--bg-light);
+
+    font-size: x-large;
+    font-family: var(--font-title);
+}
+
+.BoxBody {
+    min-height: 40px;
+    padding: 10px 40px;
+    border-radius: 0 0 25px 25px;
+
+    background-color: var(--bg-dark);
+
+    font-size: medium;
+    font-family: var(--font-regular);
+}

code/frontend/src/index.css

@@ -1,16 +1,17 @@
-@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Poppins&display=swap');
 
 * {
     box-sizing: border-box;
 }
 
 body {
+    --font-title: "Bree Serif", serif;
+    --font-regular: "Poppins", sans-serif;
+
     margin: 0;
 
     min-height: 100%;
     min-width: 100%;
-
-    font-family: "Bree Serif", serif;
 }
 
 .ThemeDark {