Блог

 import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { StateProvider } from "./StateProvider";
import reducer, { initialState } from "./reducer";

ReactDOM.render(
  <React.StrictMode>
    <StateProvider initialState={initialState} reducer={reducer}>
      <App />
    </StateProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

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

 import React, { createContext, useContext, useReducer } from "react";
import { Children } from "react";

export const StateContext = createContext();

export const StateProvider = ({ reducer, initialState, children }) => (
  <StateContext.Provider value={useReducer(reducer, initialState)}>
    {Children}
  </StateContext.Provider>
);

export const useStateValue = () => useContext(StateContext); 

 export const initialState = {
  basket: [],
};

function reducer(state, action) {
  switch (action.type) {
    case "ADD_TO__BASKET":
      break;
    case "REMOVE_FROM_BASKET":
      break;
    default:
      return state;
  }
}

export default reducer; 

 import React from "react";
import "./Header.css";
import { Link } from "react-router-dom";
import SearchIcon from "@material-ui/icons/Search";
import { grey } from "@material-ui/core/colors";
import ShoppingBasketIcon from "@material-ui/icons/ShoppingBasket";
import { useStateValue } from "./StateProvider";

function Header() {
  const [{ basket }] = useStateValue();

  return (
    <nav className="header">
      {/* logo */}
      <Link to="/">
        <img
          className="header__logo"
          src="https://www.mabaya.com/wp-content/uploads/2019/10/amazon_PNG25.png"
          alt=""
        />
      </Link>

      {/* SearchBox */}
      <div className="header__search">
        <input type="text" className="header__SearchBox" />
        <SearchIcon className="header__SearchIcon" />
      </div>
      {/* Links */}
      <div className="header__nav">
        {/* 1link */}
        <Link to="/login" className="header__link">
          <div className="header__option">
            <span className="header__optionsecondary">Hello,</span>
            <span>Sign in</span>
          </div>
        </Link>
        {/* 2link */}
        <Link to="/check" className="header__link">
          <div className="header__option">
            <span className="header__optionsecondary">returns </span>
            <span>amp; orders</span>
          </div>
        </Link>
        {/* 3link */}
        <Link to="/" className="header__link">
          <div className="header__option">
            <span className="header__optionsecondary">Your</span>
            <span>Prime</span>
          </div>
        </Link>
        {/* basket link */}
        <Link to="/check" className="header__link">
          <div className="header__optionbasket">
            {/* shopping Basket Icon  */}
            <ShoppingBasketIcon style={{ color: grey[50] }} />
            {/* Number of items in the basket  */}
            <span className="header__optionbaskettext"> {basket.length}</span>
          </div>
        </Link>
      </div>
      {/* panier */}
    </nav>
  );
}

export default Header; 

 import "./App.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Header from "./Header";
import Home from "./Home";
import Login from "./Login";

function App() {
  return (
    <Router>
      <div className="app">
        <Switch>
          <Route path="/login">
            <Header />
            <Login />
          </Route>

          <Route path="/check">
            <Header />

            <h1>check guys</h1>
          </Route>

          <Route path="/">
            <Header />
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;