Notes

// import React from 'react';
// import ReactDOM from 'react-dom/client';
// import './index.css';
// import App from './App';
// import reportWebVitals from './reportWebVitals';

// const root = ReactDOM.createRoot(document.getElementById('root'));
// root.render(
// <React.StrictMode>
// <App />
// </React.StrictMode>
// );

// // If you want to start measuring performance in your app, pass a function
// // to log results (for example: reportWebVitals(console.log))


// // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
// reportWebVitals();

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import {
Route,
NavLink,
BrowserRouter as Router,
Switch,
} from "react-router-dom";
import SearchOutlinedIcon from "@mui/icons-material/SearchOutlined";
import ShoppingCartOutlinedIcon from "@mui/icons-material/ShoppingCartOutlined";


import ShoppingBagSharpIcon from "@mui/icons-material/ShoppingBagSharp";
import Fab from "@mui/material/Fab";
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
import ToggleButton from "@mui/material/ToggleButton";
import App from "./App";
// import Home from "./Components/Home.js";
import photo from "./Images/photo.jpg"
import ProductList from "./Components/Product/ProductList";
import Login from "./Components/Log/LoginForm";
import Signup from "./Components/Log/Signup";
// import App from "./App";
// import Groceries from "./shoppingcart/Groceries";
// import Addtocart from "./shoppingcart/Addtocart"
// import MensFashion from "./shoppingcart/MensFashion";
// import WomensFashion from "./shoppingcart/WomensFashion";
// import KidsFashion from "./shoppingcart/KidsFashion";
// import NotFound from "./shoppingcart/NotFound";


const route = (
<Router>
<div className="homepage">
<div>
<ul>
<ToggleButton value="list" aria-label="list" sx={{ border: "0" }}>
</ToggleButton>
<ToggleButton value="list" aria-label="list" sx={{ border: "0" }}>
<ShoppingBagSharpIcon></ShoppingBagSharpIcon>
</ToggleButton>
<div className="navbar">
<li>
<NavLink exact activeClassName="active" to="/App">
Home
</NavLink>
</li>
<li>
<NavLink activeClassName="active" to="/ProductList">
Products
</NavLink>
</li>
<li>
<NavLink activeClassName="active" to="/LoginForm">
Login
</NavLink>
</li>
<li>
<NavLink activeClassName="active" to="/Signup">
Signup
</NavLink>
</li>
</div>
<div>
<ToggleButton value="list" aria-label="list" sx={{ border: "0" }}>
<SearchOutlinedIcon
style={{ marginRight: "1rem" }}
></SearchOutlinedIcon>
</ToggleButton>
<NavLink activeClassName="active" to="/addtocart">
<ToggleButton value="list" aria-label="list" sx={{ border: "0" }}>
<ShoppingCartOutlinedIcon />
</ToggleButton>
</NavLink>
</div>
</ul>
</div>

<Switch>
<Route exact path="/" component={App} />
<Route path="/ProductList" component={ProductList} />
<Route path="/Login" component={Login} />
<Route path="/Signup" component={Signup} />
{/* <Route path="/groceries" component={Groceries} />
<Route path="/addtocart" component={Addtocart}/>
<Route path="/Mens-Fashion" component={MensFashion}/>
<Route path="/Womens-Fashion" component={WomensFashion}/>
<Route path="/Kids-Fashion" component={KidsFashion}/>
<Route component={NotFound}/> */}
</Switch>
</div>
</Router>
);

ReactDOM.render(route, document.getElementById("root"));