text: import React, { useState } from "react";
  import ReactDOM from "react-dom";
  
  import Header from "./components/Layout/Header";
  import Meals from "./components/Meals/Meals";
  import Cart from "./components/Cart/Cart";
  import CartProvider from "./store/cartProvider";
  
  const FoodApp = () => {
      const [cartIsShown, setCartIsShown] = useState(false);
  
      const showCartHandler = () => {
          setCartIsShown(true);
      };
  
      const hideCartHandler = () => {
          setCartIsShown(false);
      };
  
      return (
          <CartProvider>
              {cartIsShown && <Cart onClose={hideCartHandler} />}
              <Header onShowCart={showCartHandler} />
              <main>
                  <Meals />
              </main>
          </CartProvider>
      );
  };
  
  export default FoodApp;
  
  if (document.getElementById("app")) {
      ReactDOM.render(<FoodApp />, document.getElementById("app"));
  }
  