<file_sep>import React, {Fragment} from 'react';
import './Nav.css'


const Nav = () => {


    return (
      
        <div className="nav">
          <div className="row" >
           <div className="col-6" style={{textAlign:"left"}}>
            <h1 style={{color:"blue", paddingLeft:"40px"}}>User DashBoard</h1>
           </div>
            <div className="col-6" style={{paddingLeft:"200px"}}>

                 <div className="row">
                 <div className="col-3" style={{paddingLeft:"70px"}}><button className="signin_button" onClick={(event) =>  window.location.href='/signin'}>Signin</button></div>

                 <div className="col-3" style={{paddingLeft:"70px"}}><button className="signout_button" onClick={(event) =>  window.location.href='/'}>Signout</button></div>

                 <div className="col-5" style={{paddingLeft:"120px"}}>
                 <input className="form-control" placeholder="Type here to search......." style={{background:"#222", border:"1px solid blue",height:"35px", width:"250px", color:"white"}}></input>
                 </div>

                 <div className="col-1" ><img
                 className="nav_avatar"
                 src="https://upload.wikimedia.org/wikipedia/commons/0/0b/Netflix-avatar.png"
                 alt="Avatar Logo"></img></div>
                 </div>
            </div>
          </div>
        
    </div>
        
    )
}

export default Nav;<file_sep>import React, { useState } from "react";
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";
import 'bootstrap/dist/css/bootstrap.css';
import './Signin.css'
import './App.css'


const Signin = () => {

  return (
    <div className="Login">
       <form>
       <div className="form-inner">
           <h2 style={{fontSize:"40px", paddingTop:"10px"}}>Login Here!</h2>
           
           <div className="form-group" style={{paddingTop:"40px"}}>
                <div className="row">
                    <div className="col-4" style={{textAlign:"right"}}>
                    <label htmlFor="name" >Name</label>
                    </div>
                    <div className="col-8" style={{textAlign:"left"}}>
                    <input type="text" name="name" id="name" />
                    </div>
                </div>
                <div className="form-group" style={{paddingTop:"20px"}}>
                <div className="row">
                <div className="col-4" style={{textAlign:"right"}}>
                <label htmlFor="email">Email</label>
                </div>
                <div className="col-8" style={{textAlign:"left"}}>
                <input type="email" name="email" id="email"/>
                </div>
                </div>
                
                </div>

                <div className="form-group" style={{paddingTop:"10px"}}>
                <div className="row">
                <div className="col-4" style={{textAlign:"right"}}>
                <label htmlFor="password" >Password</label>
                </div>
                <div className="col-8" style={{textAlign:"left"}}>
                <input type="password" name="password" id="password" />
                </div>
                 </div>
                
                </div>
                
           </div>
           <button className="submit_button">Login</button>
       </div>
      </form>
       
    </div>
  )
}

export default Signin
<file_sep>import React from 'react'
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Nav from './Nav'
import './App.css';
import Mainpage from './Mainpage'
import Signin from './Signin'
import signup from './Signup'
import Dashboard from './Dashboard'



function App() {
  return (
    <div className="App">
      
        <React.Fragment>
         <Router>
         <Nav/>
        <Switch>
          <Route exact path="/" component={Mainpage} />
          <Route exact path="/signin" component={Signin} />
          </Switch>
         </Router>
       </React.Fragment>
        
    </div>
  );
}

export default App;
<file_sep>const Dashboard = () => {
    return (
        <div style={{color:"blue"}}>
            Hello
        </div>
    )
}

export default Dashboard
<file_sep>import React , {useState} from "react"

const Signup = () => {
   const [values, setValues] = useState({
       name:"",
       email:"",
       password:""
   })

   const {name, email, password} = values
   

   const handelChange = name => event => {
       setValues({...values, error: false, [name] : event.target.value})
   }
    const onSubmit = event => {
        event.preventDefault();
        setValues({...values, error: false});
    }
    return (
            <div className="row">
                <div className="col-md-4 offset-sm-4 text-left">
                  <form>
                      <div className="form-group" >
                      <label className="text-light">Name</label>
                      <input className="form-control" onChange={handelChange("name")} type="text" value={name}/>
                      </div>

                      <div className="form-group" >
                      <label className="text-light">Email</label>
                      <input className="form-control" onChange={handelChange("email")} type="email" value={email}/>
                      </div>

                      <div className="form-group" >
                      <label className="text-light">Password</label>
                      <input className="form-control" onChange={handelChange("password")} type="<PASSWORD>" value={password}/>
                      </div>
                      <div className="py-3">
                          <button onClick={onSubmit} className="btn btn-info btn-block offset-sm-4" >Submit</button>
                      </div>
                      
                  </form>
                </div>
            </div>
        )
    }
export default Signup;