Toolbar

The toolbar at the top of the page offers controls for adding new memories and changing the month and day that the user wishes to remember. You build it out of a couple of buttons, a select menu, and a number input:

export function Toolbar() {
  return (
    <div className="toolbar">
      <button>New Memory</button>
      <div className="month-day-picker">
        <select>
          <option value="1">January</option>
          <option value="2">February</option>
          <option value="3">March</option>
          <option value="4">April</option>
          <option value="5">May</option>
          <option value="6">June</option>
          <option value="7">July</option>
          <option value="8">August</option>
          <option value="9">September</option>
          <option value="10">October</option>
          <option value="11">November</option>
          <option value="12">December</option>
        </select>
        <input type="number" min="1" max="31" />
        <button>Remember</button>
      </div>
    </div>
  );
}

Following your file naming scheme, you place this code in src/Toolbar.js. In App, you drop the toolbar in above the memories:

// ...
import {Toolbar} from './Toolbar';

function App() {
  // ...

  return (
    <div className="App">
      <Toolbar />
      {/* ... */}
    </div>
  );
}

The toolbar needs some styling. You want the month-day picker to be centered and the new memory button to be off to one side. A three-column grid layout seems like the easiest way to achieve this, even though you only need two of the columns. You add these rulesets to your stylesheet:

.toolbar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-items: start;
  margin-bottom: 10px;
}

.month-day-picker {
  justify-self: center;
  display: flex;
  flex-direction: row;
  gap: 3px;
}

The month-day picker is a Flex parent that separates the inputs using the new-ish gap property.

Now you're ready to make these inputs do something.