Alasivujen pohjat

Seuraavaksi toteutamme alasivuille pohjat, jotta voimme kutsua niitä React Routerin kautta. Luomme sivupohjat sekä kauppasivulle että asetussivulle.

Store-komponentti

Luo src/pages-kansioon Store.jsx-niminen tiedosto ja liitä sen sisällöksi seuraava ohjelmakoodi:

import Header from '../components/Header';

function Store(props) {
  return (
    <div className="container">
      <Header balance={props.stats.balance}>store</Header>
      <div className="scrollbox items">
        TODO items
      </div>
    </div>
  );
}

export default Store;

Settings-komponentti

Luo src/pages-kansioon Settings.jsx-niminen tiedosto ja liitä sen sisällöksi seuraava ohjelmakoodi:

import Header from '../components/Header';

function Settings(props) {
  return (
    <div className="container">   
      <Header balance={props.stats.balance}>settings</Header>
      <div className="scrollbox">
        <div className="settings">
          <h2>lemon stats</h2>
          <div>
            TODO stats
          </div>
        </div>
        TODO reset
      </div>
    </div>
  );
}

export default Settings;

Muutosten vienti versiohallintaan

Viedään viimeisimmät muutokset versiohallintaan.

git add .
git commit -m "lisää Store- ja Settings-komponentit"

lisää Store- ja Settings-komponentit -commit