Functionnal basic versions implementation on the backend and made the emty small card component for frontend

frontend/src/components/Cards/small_card.jsx

@@ -0,0 +1,34 @@
+// Preact
+import { h } from 'preact' // Necessary ?
+
+// Styles
+import styles from './small_card.module.css'
+
+// Images
+import Thumbnail from '../../assets/mod.svg'
+import Banner from '../../assets/example.jpg'
+
+function SmallCard({item, variant, href}) {
+    console.debug(variant, item);
+
+    if (variant === 'empty') {
+        return (
+            <a className={styles.emptyCard} href={href}>  
+                <p className={styles.emptyCardText}>{item}</p>
+            </a>
+        );
+    } else if (variant === 'mod') {
+
+        const item_page = "/mods/" + item.name;
+        return (
+            <a className={styles.Card} href={href}>  
+                <div className={styles.CardText}>
+                    {item.display_name}
+                </div>
+            </a>
+        );
+    }
+    
+}
+
+export default SmallCard;

frontend/src/components/Cards/small_card.module.css

@@ -0,0 +1,51 @@
+.emptyCard {
+    height: 100%;
+    width: 22em;
+    align-items: center;
+    display: flex;
+
+    background-color: #141414;
+    border: #3a3a3a .1rem solid;
+    border-radius: 1rem;
+
+    box-sizing: border-box;
+}
+
+.emptyCardText {
+
+    padding: 1em;
+    width: 100%;
+
+    color: #9a9a9a;
+
+    text-align: center;
+    vertical-align: middle;
+
+    user-select: none;
+}
+
+.Card {
+    height: 100%;
+    width: 22em;
+    align-items: center;
+    display: flex;
+
+    background-color: #141414;
+    border: #3a3a3a .1rem solid;
+    border-radius: 1rem;
+
+    box-sizing: border-box;
+}
+
+.CardText {
+
+    padding: 1em;
+    width: 100%;
+
+    color: #9a9a9a;
+
+    text-align: center;
+    vertical-align: middle;
+
+    user-select: none;
+}

frontend/src/components/NavBar/navbar.module.css

@@ -6,7 +6,7 @@
     
     margin: 1rem;
     height: 5rem;
-    min-width: 29rem; /* TODO update when changing navbar items (not automatic)*/
+    min-width: fit-content; 
     
     background-color: #1a1a1a;
     color: #eaeaea;

frontend/src/pages/dashboard.jsx

@@ -9,6 +9,7 @@ import { listMods } from '../services/mods';
 
 // Components
 import Button from '../components/Buttons/button'
+import SmallCard from '../components/Cards/small_card';
 
 // Images
 import Logo from '../assets/logo.png'
@@ -18,6 +19,7 @@ import Add from '../assets/add.svg'
 import styles from '../styles/dashboard.module.css'
 
 function DashboardPage() {
+    //TODO takes too long to load
 
     // useStates
 
@@ -117,11 +119,10 @@ function DashboardPage() {
                         Favorites
                     </p>
                     <div className={styles.tiles}>
-                        <div className={styles.emptyTile}>
-                            <p className={styles.emptyTileText}>
-                                You have no favorites for the moment
-                            </p>
-                        </div>
+                        <SmallCard 
+                            variant='empty'
+                            item={"You have no favorites for the moment"}
+                            />
                     </div>
                 </div>
                 <div className={styles.category}>
@@ -132,19 +133,20 @@ function DashboardPage() {
                         
                         {/* Temporary, missing card component */}
                         {creations.map( (item) => {
-                            console.debug(item.name);
-                            return (<div className={styles.emptyTile}>
-                                <div className={styles.emptyTileText}>
-                                    {item.display_name}
-                                </div>
-                            </div>);
+                            return (
+                            <SmallCard 
+                                variant='mod'
+                                href={'/mods/'+item.name}
+                                item={item}
+                                />
+                            );
                         })}
 
-                        <a className={styles.emptyTile} href='/create/mod'>
-                            <p className={styles.emptyTileText}>
-                                <img src={Add} ></img>
-                            </p>
-                        </a>
+                        <SmallCard 
+                            variant='empty'
+                            item={<img src={Add} ></img>}
+                            href='/create/mod'
+                        />
                     </div>
                 </div>
                 <div className={styles.toolbar}>

frontend/src/styles/dashboard.module.css

@@ -47,7 +47,7 @@
 }
 
 .emptyTile {
-    height: 99%;
+    height: 100%;
     width: 22em;
     align-items: center;
     display: flex;
@@ -55,6 +55,8 @@
     background-color: #141414;
     border: #3a3a3a .1rem solid;
     border-radius: 1rem;
+
+    box-sizing: border-box;
 }
 
 .emptyTileText {