ajout bouton création serveurs

src/components/serverCard/serverCard.module.scss

@@ -9,6 +9,7 @@
   align-items: center;
   background-color: var(--card-bg-color);
   color: var(--text-color);
+  margin-bottom: 1.5rem;
 }
 
 .status {

src/main.css

@@ -11,8 +11,8 @@ html {
   --profile-pic-size: 3rem;
   --logout-button-bg: #ff4b4b;
   --logout-button-bg-hover: #ff1a1a;
-  --card-width: 100%;
-  --card-padding: 4rem;
+  --card-width: 80%;
+  --card-padding: 3.5rem;
   --card-border-color: #343947;
   --card-bg-color: #1D1836;
   --main-bg-color: #050816;

src/pages/DashboardPage/DashboardPage.jsx

@@ -6,11 +6,13 @@ import NoServer from '../NoServer/NoServer';
 import { getUserSubdomain } from "../../service/firebase";
 import serviiApi from "../../service/api.tsx";
 import Loading from '../Loading/loading';
+import CreateServer from '../../components/CreateServer/CreateServer';
 
 const DashboardPage = ({ user }) => {
   const [servers, setServers] = useState([]);
   const [subdomain, setSubdomain] = useState("");
   const [loading, setLoading] = useState(true);
+  const [showCreateServer, setShowCreateServer] = useState(false); 
 
   const loadServers = async () => {
     try {
@@ -38,11 +40,16 @@ const DashboardPage = ({ user }) => {
       if (!serverName || !serverVersion) return;
       await serviiApi.serverCreate(serverName, serverVersion, "paper");
       await loadServers();
+      setShowCreateServer(false);
     } catch (error) {
       console.error('Error creating server:', error);
     }
   };
 
+  const handleCreateServerPage = () => {
+    setShowCreateServer(true); 
+  };
+
   const handleRunServer = async (serverName) => {
     try {
       await serviiApi.serverRun(serverName);
@@ -70,20 +77,33 @@ const DashboardPage = ({ user }) => {
     }
   };
 
+  if (showCreateServer) {
+    return <CreateServer user={user} onCreateServer={handleCreateServer} />;
+  }
+
   return (
     <div className={styles.dashboardContainer}>
       <Navbar user={user} />
       {loading ? (
         <Loading />
-      ) : 
-          <div className={styles.cardsContainer}>
-          <div className={styles.iptitle}>Adresse de connexion à vos serveurs : <span>{subdomain}.servii.fr</span></div>            
+      ) : (
+        <div className={styles.cardsContainer}>
           {servers.length === 0 ? (
-              <NoServer user={user} onCreateServer={handleCreateServer} />
-            ) : (
-              servers.map((server, index) => (
+            <NoServer user={user} onCreateServer={handleCreateServer} />
+          ) : (
+            <div>
+              <div className={styles.iptitle}>
+                Adresse de connexion à vos serveurs : <span>{subdomain}.servii.fr</span>
+              </div>
+              <button
+                className={styles.btncreate}
+                onClick={handleCreateServerPage}
+              >
+                Créer un nouveau serveur
+              </button>
+              {servers.map((server) => (
                 <ServerCard
-                  key={index}
+                  key={server.id}
                   status={server.running}
                   version={server.version}
                   name={server.name}
@@ -93,11 +113,11 @@ const DashboardPage = ({ user }) => {
                   onDeleteClick={() => handleDeleteServer(server.name)}
                   subdomain={subdomain}
                 />
-              )
-            )
-            )}
-          </div>
-      }
+              ))}
+            </div>
+          )}
+        </div>
+      )}
     </div>
   );
 };

src/pages/DashboardPage/DashboardPage.module.scss

@@ -36,4 +36,20 @@ html, body {
 
 .iptitle span {
   color: violet;
+}
+
+.btncreate{
+  display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #1D1836;
+    width: 40rem;
+    height: 5rem;
+    color: white;
+    border: solid 0.1rem #090325;
+    cursor: pointer;
+    font-size: 2rem;
+    font-weight: 900;
+    border-radius: 1rem;
+    margin-bottom: 3rem;
 }