navbar component; home component

jordus100 · May 24, 2024 · c7f9e80 · c7f9e80
1 parent 4d4860f
commit c7f9e80
Show file tree

Hide file tree

Showing 12 changed files with 395 additions and 165 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,11 +1,13 @@
 import './App.scss';
-import User from './User/User';
-import { Link } from 'react-router-dom';
+import Navbar from './Navbar';
+import Home from './Home';
 import { useState } from 'react';
 
 function App() {
+    const [isAuthenticated, setIsAuthenticated] = useState(false);
     const [isCollapsed, setIsCollapsed] = useState(false);
 
+
     const toggleUserBar = () => {
         setIsCollapsed(!isCollapsed);
     };
@@ -14,36 +16,12 @@ function App() {
         <div className="app">
             <div className="log-head">
                 <header className="header">
-                    <div className="logo">
-                        <h1>Bot-Wars</h1>
-                    </div>
-                    <nav className="nav">
-                        <div className="menu-btns">
-                            <div className="menu-btn">
-                                <Link to="tournaments/home">
-                                    <button className="btn">Tournaments</button>
-                                </Link>
-                            </div>
-                            <div className="menu-btn">
-                                <Link to="games">
-                                    <button className="btn">Games</button>
-                                </Link>
-                            </div>
-                            <div className="menu-btn">
-                                <Link to="about">
-                                    <button className="btn">About us</button>
-                                </Link>
-                            </div>
-                            <div className="menu-btn">
-                                <User isAuthenticated={false} />
-                            </div>
-                        </div>
-                    </nav>
+                    <Navbar isAuthenticated={isAuthenticated} user={null} />
                 </header>
             </div>
 
             <div className='container'>
-                <h2>Hello World</h2>
+                <Home isAuthenticated={isAuthenticated} />
             </div>
         </div>
     );

diff --git a/src/App.scss b/src/App.scss
@@ -6,6 +6,7 @@
 
 body {
   margin: 0;
+  padding: 0;
   font-family: Arial, sans-serif;
   background: #000;
   color: #0f0;
@@ -24,10 +25,7 @@ body {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: 10px 20px;
       background: rgba(0, 0, 0, 0.8);
-      border-bottom: 1px solid #0f0;
-      padding: 25px;
       width: 100%;
 
       .logo {
@@ -42,65 +40,6 @@ body {
         font-size: 1.5em;
         color: #0f0;
       }
-
-      .nav {
-        flex-grow: 1;
-
-        .menu-btns {
-          list-style: none;
-          margin: 0;
-          padding: 0;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          gap: 20px;
-
-          .menu-btn {
-            display: flex;
-            align-items: center;
-            margin: 10px 0 10px 5px;
-            padding: 0;
-
-            a {
-              text-decoration: none;
-              display: flex;
-              align-items: center;
-
-              .btn,
-              .login-btn {
-                padding: 10px 20px;
-                border: none;
-                // color: #000;
-                font-weight: bold;
-                cursor: pointer;
-                min-width: 130px;
-
-                &:hover {
-                  background: #fff;
-                  color: #000;
-                }
-              }
-
-              .signup-btn {
-                padding: 10px 20px;
-                // border: 3px solid #3D1680 ;
-                background-color: #0BE400;
-                color: #000;
-                border-radius: 20px;
-                font-weight: bold;
-                cursor: pointer;
-                min-width: 130px;
-                margin-right: 10px;
-
-                &:hover {
-                  background: #fff;
-                  color: #000;
-                }
-              }
-            }
-          }
-        }
-      }
     }
 
     .flex-user {

diff --git a/src/Home.js b/src/Home.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import './Home.scss';
+
+function Home({ isAuthenticated }) {
+    return (
+        <div className="home">
+            <div className="welcome-box">
+                <h1>Welcome to Bot-Wars!</h1>
+                {isAuthenticated ? (
+                    <p>Welcome back! Check out our latest tournaments and games.</p>
+                ) : (
+                    <p>Join us today and start competing in our exciting tournaments!</p>
+                )}
+            </div>
+            <div className="info-boxes">
+                {isAuthenticated ? (
+                    <>
+                        <div className="info-box">
+                            <h2>Your Dashboard</h2>
+                            <p>View your current standings, upcoming matches, and more.</p>
+                        </div>
+                        <div className="info-box">
+                            <h2>Latest Tournaments</h2>
+                            <p>Stay updated with the latest tournaments and events.</p>
+                        </div>
+                    </>
+                ) : (
+                    <>
+                        <div className="info-box">
+                            <h2>Why Join Bot-Wars?</h2>
+                            <p>Compete with players from around the world and prove your skills.</p>
+                        </div>
+                        <div className="info-box">
+                            <h2>How to Get Started</h2>
+                            <p>Sign up, create your profile, and join your first tournament today.</p>
+                        </div>
+                    </>
+                )}
+            </div>
+        </div>
+    );
+}
+
+export default Home;
diff --git a/src/Home.scss b/src/Home.scss
@@ -0,0 +1,56 @@
+.home {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+    background-color: #f4f4f4;
+
+    .welcome-box {
+        background: #fff;
+        border: 1px solid #ddd;
+        border-radius: 10px;
+        padding: 20px;
+        margin-bottom: 20px;
+        text-align: center;
+        width: 80%;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+
+        h1 {
+            color: #333;
+            margin-bottom: 10px;
+        }
+
+        p {
+            color: #666;
+            font-size: 1.2em;
+        }
+    }
+
+    .info-boxes {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 20px;
+        justify-content: center;
+        width: 100%;
+
+        .info-box {
+            background: #fff;
+            border: 1px solid #ddd;
+            border-radius: 10px;
+            padding: 20px;
+            width: 300px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            text-align: center;
+
+            h2 {
+                color: #333;
+                margin-bottom: 10px;
+            }
+
+            p {
+                color: #666;
+                font-size: 1em;
+            }
+        }
+    }
+}
diff --git a/src/Navbar.js b/src/Navbar.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import User from './User/User';
+import './Navbar.scss';
+
+function Navbar({ isAuthenticated, user }) {
+    return (
+        <div className="navbar">
+            <div className="logo">
+                <h1>Bot-Wars</h1>
+            </div>
+            <nav className="nav">
+                <div className="menu-btns">
+                    <div className="menu-btn">
+                        <Link to="tournaments/home">
+                            <button className="btn">Tournaments</button>
+                        </Link>
+                    </div>
+                    <div className="menu-btn">
+                        <Link to="games">
+                            <button className="btn">Games</button>
+                        </Link>
+                    </div>
+                    <div className="menu-btn">
+                        <Link to="about">
+                            <button className="btn">About us</button>
+                        </Link>
+                    </div>
+                    <div className="menu-btn">
+                        <User isAuthenticated={isAuthenticated} user={user} />
+                    </div>
+                </div>
+            </nav>
+        </div>
+    );
+}
+
+export default Navbar;
diff --git a/src/Navbar.scss b/src/Navbar.scss
@@ -0,0 +1,78 @@
+.navbar {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    justify-content: space-between;
+    padding: 10px 20px;
+    background: rgba(0, 0, 0, 0.8);
+    border-bottom: 1px solid #0f0;
+
+    .logo {
+        display: flex;
+        justify-content: left;
+        letter-spacing: 5px;
+
+        h1 {
+            margin: 0;
+            font-size: 1.5em;
+            color: #0f0;
+        }
+    }
+
+    .nav {
+        flex-grow: 1;
+
+        .menu-btns {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            gap: 20px;
+
+            .menu-btn {
+                display: flex;
+                align-items: center;
+                margin: 10px 0 10px 5px;
+                padding: 0;
+
+                a {
+                    text-decoration: none;
+                    display: flex;
+                    align-items: center;
+
+                    .btn,
+                    .login-btn {
+                        padding: 10px 20px;
+                        border: none;
+                        font-weight: bold;
+                        cursor: pointer;
+                        min-width: 130px;
+
+                        &:hover {
+                            background: #fff;
+                            color: #000;
+                        }
+                    }
+
+                    .signup-btn {
+                        padding: 10px 20px;
+                        background-color: #0be400;
+                        color: #000;
+                        border-radius: 20px;
+                        font-weight: bold;
+                        cursor: pointer;
+                        min-width: 130px;
+                        margin-right: 10px;
+
+                        &:hover {
+                            background: #fff;
+                            color: #000;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}