From 6b961304997ccf5b7ec2c6e05d1ca2fca6cc7574 Mon Sep 17 00:00:00 2001
From: Ellis <ellispinsky5@gmail.com>
Date: Tue, 5 Mar 2024 21:55:00 -0500
Subject: [PATCH] feat: added navbar feat: added signup page feat: added
 routing using react router chore: added tailwindcss and updated package
 accordingly

---
 front-end/package.json                 |  3 +
 front-end/src/App.css                  |  3 +
 front-end/src/App.js                   |  4 ++
 front-end/src/components/SignUpPage.js | 79 ++++++++++++++++++++++++++
 front-end/src/components/home.js       | 14 +++--
 front-end/src/components/navbar.js     | 58 +++++++++++++++++++
 front-end/tailwind.config.js           |  9 +++
 7 files changed, 166 insertions(+), 4 deletions(-)
 create mode 100644 front-end/src/components/SignUpPage.js
 create mode 100644 front-end/src/components/navbar.js
 create mode 100644 front-end/tailwind.config.js

diff --git a/front-end/package.json b/front-end/package.json
index 3788deb..a0aeec7 100644
--- a/front-end/package.json
+++ b/front-end/package.json
@@ -35,5 +35,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.1"
   }
 }
diff --git a/front-end/src/App.css b/front-end/src/App.css
index 2c7939e..9441d9e 100644
--- a/front-end/src/App.css
+++ b/front-end/src/App.css
@@ -1,3 +1,6 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 .App {
   text-align: center;
 }
diff --git a/front-end/src/App.js b/front-end/src/App.js
index 0fd6224..5f13a97 100644
--- a/front-end/src/App.js
+++ b/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>
   );
diff --git a/front-end/src/components/SignUpPage.js b/front-end/src/components/SignUpPage.js
new file mode 100644
index 0000000..6b15b50
--- /dev/null
+++ b/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;
diff --git a/front-end/src/components/home.js b/front-end/src/components/home.js
index 63934fb..3e14b0d 100644
--- a/front-end/src/components/home.js
+++ b/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>
   )
 }
diff --git a/front-end/src/components/navbar.js b/front-end/src/components/navbar.js
new file mode 100644
index 0000000..6f80113
--- /dev/null
+++ b/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;
diff --git a/front-end/tailwind.config.js b/front-end/tailwind.config.js
new file mode 100644
index 0000000..e5b64f3
--- /dev/null
+++ b/front-end/tailwind.config.js
@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{html,js}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+