One Frame for Every Page in JavaScript

Every page of the shop has the same frame: the header on top, a footer at the bottom, and the page itself in between. Instead of drawing the frame in each page, you draw it once, in a layout route.

The given src/App.jsx already puts all the pages inside one parent route: <Route element={<Layout />}>. That route has no path, so it matches every address. React Router draws Layout, and inside it the child route that matches the address. Where inside? At the Outlet: the spot in the layout where the page goes.

On a blog, a frame could draw each post with a sidebar next to it:

function BlogFrame() {
  return (
    <div>
      <Outlet />
      <aside>Latest posts</aside>
    </div>
  );
}

Your layout must give:

open /products/3  →  header: Corner Shop, Products, Cart
                     main: section "Product": Lamp, $29, 1 in stock
                     footer: Corner Shop, open every day from 9 to 18
click "Cart"      →  only main changes: section "Cart", Your cart is empty
                     (and the header's Cart link becomes current)
open /nowhere     →  header, then Page not found in main, then the footer

Your task: in src/Layout.jsx, draw the Header, a main with the Outlet inside, and a footer with the shop's opening hours.

Assignment
Follow the Coding Tutorial to build the shop's frame in Layout: the header, the page's Outlet, the footer.

Hint
Without an Outlet, the layout draws its frame but never the page. The Outlet goes inside main.