🔧 Rename and improve TitleBox into appuntiweb/Box

src/App.js

@@ -1,5 +1,5 @@
-import React, {Fragment, useState} from "react";
-import {BaseLink, Bluelib, Main} from "bluelib/lib/components";
+import React, {useState} from "react";
+import {Bluelib, Main} from "bluelib/lib/components";
 import {Switch, Route} from "react-router-dom";
 import Home from "./routes/Home";
 import Error404 from "./routes/Error404";

src/components/Box.js

@@ -0,0 +1,22 @@
+import React from "react";
+import {Box as BluelibBox, Title} from "bluelib/lib/components";
+import PropTypes from "prop-types";
+import classNames from "classnames"
+import Style from "./Box.module.css"
+
+
+export default function Box({children, className, title, Type = BluelibBox, ...props}) {
+    return (
+        <Type className={classNames(Style.Panel, className)} {...props}>
+            <Title size={"l"}>
+                {title}
+            </Title>
+            {children}
+        </Type>
+    )
+}
+
+Box.propTypes = {
+    children: PropTypes.node,
+    title: PropTypes.node
+}

src/components/Box.module.css

@@ -0,0 +1,3 @@
+.Panel {
+    min-width: 240px;
+}

src/components/TitleBox.js

@@ -1,20 +0,0 @@
-import React from "react";
-import {Box, Title} from "bluelib/lib/components";
-import PropTypes from "prop-types";
-
-
-export default function TitleBox({children, title}) {
-    return (
-        <Box>
-            <Title size={"l"}>
-                {title}
-            </Title>
-            {children}
-        </Box>
-    )
-}
-
-TitleBox.propTypes = {
-    children: PropTypes.node,
-    title: PropTypes.node
-}

src/routes/Home.js

@@ -1,7 +1,7 @@
 import React from "react";
 import {Size, Anchor, BaseLink as A, Paragraph as P, Bold as B, ListItem as LI} from "bluelib/lib/components";
 import TitleSplit from "../components/TitleSplit";
-import TitleBox from "../components/TitleBox";
+import Box from "../components/Box";
 import SelectSkin from "../components/SelectSkin";
 
 
@@ -9,33 +9,33 @@ export default function Home({skin, setSkin}) {
     return (
         <article>
             <TitleSplit title={<span>Appunti open source di <A href={"https://steffo.eu"}>Steffo</A></span>}>
-                <TitleBox title={"Unisteffo"}>
+                <Box title={"Unisteffo"}>
                     <P>
                         Ciao! Benvenuto a <B>Unisteffo</B>, il sito in cui carico tutto il materiale che uso per studiare!
                     </P>
                     <P>
                         Se trovi un errore negli appunti, o un bug del sito, per favore <Anchor href={"https://github.com/Steffo99/appuntiweb/issues/new"}>segnalamelo su GitHub</Anchor>!
                     </P>
-                </TitleBox>
-                <TitleBox title={"Tema"}>
+                </Box>
+                <Box title={"Tema"}>
                     <P>
                         Se i colori ti deconcentrano, non ti piacciono, o vuoi stampare alcune di queste pagine, puoi cambiare tema del sito qui:
                     </P>
                     <P>
                         <SelectSkin skin={skin} setSkin={setSkin}/>
                     </P>
-                </TitleBox>
+                </Box>
             </TitleSplit>
             <TitleSplit title={"Università"}>
-                <TitleBox title={"Primo anno"}>
+                <Box title={"Primo anno"}>
                     <ul>
                         <LI><Size value={"l"}><Anchor href={"https://github.com/Steffo99/appunti-universitari/tree/master/2018_Analisi1"}>Analisi matematica</Anchor></Size></LI>
                         <LI><Size value={"l"}><Anchor href={"https://github.com/Steffo99/appunti-universitari/tree/master/2018_AlgebraLineare"}>Algebra lineare</Anchor></Size></LI>
                         <LI><Size value={"l"}><Anchor href={"https://github.com/Steffo99/appunti-universitari/blob/master/2018_ArchitetturaDeiCalcolatori/08_AppuntiEDeduzioni.md"}>Architettura dei calcolatori</Anchor></Size></LI>
                         <LI><Size value={"l"}><Anchor href={"https://github.com/Steffo99/appunti-universitari/tree/master/2018_AlgoritmiEStruttureDati"}>Algoritmi e strutture dati</Anchor></Size></LI>
                     </ul>
-                </TitleBox>
-                <TitleBox title={"Secondo anno"}>
+                </Box>
+                <Box title={"Secondo anno"}>
                     <ul>
                         <LI><Size value={"l"}><A href={"/fisica"}>Fisica</A></Size></LI>
                         <LI><Size value={"l"}><Anchor href={"https://github.com/Steffo99/appunti-universitari/tree/master/2019_ProgrammazioneAdOggetti"}>Programmazione ad oggetti</Anchor></Size></LI>
@@ -46,12 +46,12 @@ export default function Home({skin, setSkin}) {
                         <LI><Size value={"l"}><Anchor href={"https://old.uni.steffo.eu/#/calcolonumerico"}>Calcolo numerico</Anchor></Size></LI>
                         <LI><Size value={"l"}><Anchor href={"https://old.uni.steffo.eu/#/ottimizzazionelineare"}>Ottimizzazione lineare intera</Anchor></Size></LI>
                     </ul>
-                </TitleBox>
-                <TitleBox title={"Terzo anno"}>
+                </Box>
+                <Box title={"Terzo anno"}>
                     <ul>
                         <LI><Size value={"l"}><A href={"/gestinfo"}>Gestione dell'informazione</A></Size></LI>
                     </ul>
-                </TitleBox>
+                </Box>
             </TitleSplit>
         </article>
     )