feat: added navbar

feat: added signup page
feat: added routing using react router
chore: added tailwindcss and updated package accordingly

front-end/package.json

@@ -35,5 +35,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.1"
   }
 }

front-end/src/App.css

@@ -1,3 +1,6 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 .App {
   text-align: center;
 }

front-end/src/App.js

@@ -3,6 +3,8 @@ import Home from "./components/home";
 import Login from "./components/login";
 import { useState } from "react";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
+import Navbar from "./components/navbar";
+import SignUpPage from "./components/SignUpPage";
 function App() {
   const [loggedIn, setLoggedIn] = useState(false);
   const [email, setEmail] = useState("");
@@ -25,7 +27,9 @@ function App() {
             path="/login"
             element={<Login setLoggedIn={setLoggedIn} setEmail={setEmail} />}
           />
+          <Route path="/signup" element={<SignUpPage />} />
         </Routes>
+        <Navbar />
       </BrowserRouter>
     </div>
   );

front-end/src/components/SignUpPage.js

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+
+const SignUpPage = () => {
+  const [formData, setFormData] = useState({
+    firstName: '',
+    lastName: '',
+    email: '',
+    password: '',
+    confirmPassword: '',
+  });
+
+  const handleChange = (e) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle the form submission logic here, like validation and sending data to backend
+    console.log(formData);
+  };
+
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-200">
+      <div className="px-8 py-6 mt-4 text-left bg-white shadow-lg">
+        <h3 className="text-2xl font-bold text-center">Create Account</h3>
+        <form onSubmit={handleSubmit}>
+          <div className="mt-4">
+            <div>
+              <label className="block" htmlFor="firstName">First Name</label>
+              <input type="text" placeholder="First Name"
+                     name="firstName" onChange={handleChange}
+                     className="w-full px-4 py-2 mt-2 border rounded-md"
+                     value={formData.firstName}
+              />
+            </div>
+            <div className="mt-4">
+              <label className="block" htmlFor="lastName">Last Name</label>
+              <input type="text" placeholder="Last Name"
+                     name="lastName" onChange={handleChange}
+                     className="w-full px-4 py-2 mt-2 border rounded-md"
+                     value={formData.lastName}
+              />
+            </div>
+            <div className="mt-4">
+              <label className="block" htmlFor="email">Email</label>
+              <input type="email" placeholder="Email"
+                     name="email" onChange={handleChange}
+                     className="w-full px-4 py-2 mt-2 border rounded-md"
+                     value={formData.email}
+              />
+            </div>
+            <div className="mt-4">
+              <label className="block" htmlFor="password">Password</label>
+              <input type="password" placeholder="Password"
+                     name="password" onChange={handleChange}
+                     className="w-full px-4 py-2 mt-2 border rounded-md"
+                     value={formData.password}
+              />
+            </div>
+            <div className="mt-4">
+              <label className="block" htmlFor="confirmPassword">Confirm Password</label>
+              <input type="password" placeholder="Confirm Password"
+                     name="confirmPassword" onChange={handleChange}
+                     className="w-full px-4 py-2 mt-2 border rounded-md"
+                     value={formData.confirmPassword}
+              />
+            </div>
+            <div className="flex items-baseline justify-between">
+              <button className="px-6 py-2 mt-4 text-white bg-gray-800 rounded-lg hover:bg-gray-700">Sign Up</button>
+              <a href="/login" className="text-sm text-blue-600 hover:underline">Already have an account? Login</a>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default SignUpPage;

front-end/src/components/home.js

@@ -5,9 +5,7 @@ const Home = (props) => {
   const { loggedIn, email } = props
   const navigate = useNavigate()
 
-  const onButtonClick = () => {
-    // You'll update this function later
-  }
+
 
   return (
     <div className="mainContainer">
@@ -19,11 +17,19 @@ const Home = (props) => {
         <input
           className={'inputButton'}
           type="button"
-          onClick={onButtonClick}
+          onClick={() => navigate("/login")}
           value={loggedIn ? 'Log out' : 'Log in'}
         />
         {loggedIn ? <div>Your email address is {email}</div> : <div />}
       </div>
+      <div className={'buttonContainer'}>
+        <input
+          className={'inputButton'}
+          type="button"
+          onClick={() => navigate("/signup")}
+          value="Sign up"
+        />
+        </div>
     </div>
   )
 }

front-end/src/components/navbar.js

@@ -0,0 +1,58 @@
+import React from "react";
+import { Link } from "react-router-dom"; // Assuming you're using react-router for navigation
+const NAV_ITEMS = [
+  {
+    name: "Home",
+    to: "/",
+    iconPaths: [
+      "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6",
+    ],
+  },
+  {
+    name: "Friends",
+    to: "/friends",
+    iconPaths: [
+      "M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z",
+    ],
+  },
+  {
+    name: "Profile",
+    to: "/profile",
+    iconPaths: [
+      "M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z",
+    ],
+  },
+  {
+    name: "Search",
+    to: "/search",
+    iconPaths: ["M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"],
+  },
+];
+
+const NavItem = ({ name, to, iconPaths }) => (
+  <Link to={to} className="flex flex-col items-center">
+    <svg
+      className="w-6 h-6"
+      fill="none"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+    >
+      {iconPaths.map((path, index) => (
+        <path key={index} d={path} />
+      ))}
+    </svg>
+    <span>{name}</span>
+  </Link>
+);
+const Navbar = () => (
+  <nav className="bg-gray-800 text-white p-4 fixed bottom-0 inset-x-0 flex justify-between text-xs md:text-sm">
+    {NAV_ITEMS.map((item, index) => (
+      <NavItem key={index} {...item} />
+    ))}
+  </nav>
+);
+
+export default Navbar;

front-end/tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{html,js}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+