added header and navbar

package.json

@@ -5,13 +5,15 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "0.9.5"
+    "react-icons": "^4.10.1",
+    "react-router-dom": "^6.0.1",
+    "react-scripts": "0.9.5",
+    "styled-components": "^5.3.11"
   },
-  "devDependencies": {},
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}

src/App.js

@@ -1,21 +1,26 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import About from "./pages/About";
+import Contact from "./pages/Contact";
+import Login from "./pages/Login";
+import { BrowserRouter as  Router,Route,Routes} from "react-router-dom";
+import Header from "./components/Header";
 
-class App extends Component {
-  render() {
-    return (
-      <div className="App">
-        <div className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h2>Welcome to React</h2>
-        </div>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
-      </div>
-    );
-  }
+
+
+function App(){
+  return(
+
+    <Router>
+      <Header/>
+      <Routes>
+        <Route path="/about" element={<About/>}/>
+        <Route path="/contact" element={<Contact/>}/>
+        <Route path="/login" element={<Login/>}/>
+        </Routes>
+    </Router>
+
+
+  );
 }
 
-export default App;
+export default App;

src/components/Header.js

@@ -0,0 +1,14 @@
+import Navbar from "./Navbar";
+import React from "react";
+
+function Header(){
+    return(
+        <div>
+            <Navbar/>
+        </div>
+
+
+    );
+}
+
+export default Header;

src/components/Navbar.css

@@ -0,0 +1,54 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0px;
+}
+
+.container {
+    margin: 0px 174.6px;
+    text-align: center;
+    padding: 0px 15px;
+}
+
+.navbar {
+    background-color: white;
+    color: black;
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch;
+    gap: 25px;
+    padding: 10px 15px;
+    box-shadow: 0 2px 2px -2px rgba(0,0,0,.15);
+}
+
+.site-name {
+    font-size: 30px;
+}
+
+.navbar ul {
+    padding: 0px 15px;
+    margin: 0px 174.6px;
+    list-style: none;
+    display: flex;
+    gap: 25px;
+}
+
+.navbar a {
+    color: inherit;
+    text-decoration: none;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    padding: 5px 12px;
+}
+
+
+
+.navbar li :hover {
+    color: grey;
+}
+
+
+

src/components/Navbar.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import "./Navbar.css";
+
+
+function Navbar(){
+    return(
+        <nav className="navbar">
+            <a href="/" className="site-name">Developer Library</a>
+            <ul>
+                <li>
+                    <Link to="/about" >About</Link>
+                </li>
+                <li>
+                    <Link to="/contact" >Contact</Link>
+                </li>
+                <li>
+                    <Link to="/login" >Login</Link>
+                </li>
+            </ul>
+
+        </nav>
+
+
+    );
+
+}
+
+export default Navbar;

src/index.js

@@ -2,6 +2,8 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 import './index.css';
+import "react-router-dom";
+
 
 ReactDOM.render(
   <App />,

src/pages/About.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function About() {
+  return (
+    <div>About</div>
+  )
+}
+
+export default About

src/pages/Contact.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function Contact() {
+  return (
+    <div>Contact</div>
+  )
+}
+
+export default Contact

src/pages/Login.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+function Login() {
+  return (
+    <div>Login</div>
+  )
+}
+
+export default Login

src/pages/Signup.css

@@ -0,0 +1,45 @@
+.signup{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 500px;
+    vertical-align: middle;
+    text-align: center;
+}
+
+
+
+
+form{
+    align-items: center;
+    width: 300px;
+    padding: 20px;
+    background-color: white;
+    border-radius: 5px;
+}
+
+form label{
+    display: block;
+    margin-bottom: 10px;
+
+}
+
+form input[type="email"],
+form input[type="password"],
+form input[type="text"]{
+    width: 100%;
+    padding: 8px;
+    margin-bottom: 10px;
+    margin-top: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+button{
+    background-color: black;
+    color: white;
+    padding: 10px;
+    border: none;
+    cursor: pointer;
+}
+

src/pages/Signup.js

@@ -0,0 +1,55 @@
+import React,{useState} from 'react'
+import './Signup.css'
+
+function Signup() {
+
+  const[username,setUsername] =useState();
+  const[email,setEmail] =useState('');
+  const[password,setPassword] =useState('');
+
+  const handleUsernameChange = (e) => {
+    setUsername(e.target.value);
+
+  };
+
+  const handleEmailChange = (e) => {
+    setEmail(e.target.value);
+
+  };
+
+  const handlePasswordChange = (e) => {
+    setPassword(e.target.value);
+
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+  };
+
+  return (
+
+  <div className='signup'>
+
+      <form onSubmit={handleSubmit}>
+        <h1>Register</h1>
+        <label>
+          Enter email:
+          <input type='email' value={email} placeholder='Enter your email' onChange={handleEmailChange} />
+        </label>
+        <label>
+          Create Username:
+          <input type="text" value={username} placeholder='Create your username' onChange={handleUsernameChange} />
+        </label>
+        <label>
+          Create password:
+          <input type="password" value={password} placeholder='******' onChange={handlePasswordChange} />
+        </label>
+        <button type='submit'>
+          Submit
+        </button>
+      </form>
+    </div>
+  )
+}
+
+export default Signup;