//
{
  "name": "resto-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@popperjs/core": "^2.11.5",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.2.0-beta1",
    "bootstrap-icons": "^1.8.3",
    "popper.js": "^1.16.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "6",
    "react-scripts": "5.0.1",
    "sweetalert2": "^11.4.18",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
                                                    
                                                

                                                        
                                                            //
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import 'bootstrap-icons/font/bootstrap-icons.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
                                                        
                                                    

                                                        
                                                            //
export const foods = [
    {
        id: 1,
        food_name: "Hamburger",
        food_desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
        food_image: "https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246__480.jpg",
        food_price: "28",
        category_id: 1
    },
    {
        id: 2,
        food_name: "Pizza",
        food_desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
        food_image: "https://cdn.pixabay.com/photo/2017/12/10/14/47/pizza-3010062__480.jpg",
        food_price: "24",
        category_id: 2
    },
    {
        id: 3,
        food_name: "Salade",
        food_desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
        food_image: "https://cdn.pixabay.com/photo/2021/01/10/04/37/salad-5904093__480.jpg",
        food_price: "4",
        category_id: 3
    },
    {
        id: 4,
        food_name: "Fish",
        food_desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
        food_image: "https://cdn.pixabay.com/photo/2014/11/05/15/57/salmon-518032__480.jpg",
        food_price: "10",
        category_id: 4
    },
    {
        id: 5,
        food_name: "Tajine",
        food_desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
        food_image: "https://cdn.pixabay.com/photo/2018/05/05/00/41/food-3375436__480.jpg",
        food_price: "20",
        category_id: 5
    }
];

export const categories = [
    {
        id: 1,
        name: "Hamburgers"
    },
    {
        id: 2,
        name: "Pizzas"
    },
    {
        id: 3,
        name: "Salades"
    },
    {
        id: 4,
        name: "Fishs"
    },
    {
        id: 5,
        name: "Tajines"
    }
];
                                                        
                                                    

                                                        
                                                            //
import React from 'react'
import { Link } from 'react-router-dom'

export default function Navbar({cartItems}) {
  return (
    <nav className="navbar navbar-expand-lg bg-danger navbar-dark rounded">
      <div className="container-fluid">
        <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="navbarSupportedContent">
          <ul className="navbar-nav mx-auto mb-2 mb-lg-0">
            <li className="nav-item">
              <Link to='/' className="nav-link active" aria-current="page">
                <i className="bi bi-house"></i> Home
              </Link>
            </li>
            <li className="nav-item">
              <Link to='/cart' className="nav-link active" aria-current="page">
                <i className="bi bi-cart"></i> Cart ({cartItems.length})
              </Link>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  )
}
                                                        
                                                    

                                                        
                                                            //
import React, { useContext, useState } from 'react';
import FoodItem from './FoodItem';
import { ShoppingContext } from "./context/ShoppingContext";
import { Link } from 'react-router-dom';


export default function Home() {
    const { foods, categories } = useContext(ShoppingContext);
    const [foodList,setFoodList] = useState(foods);

    const filterFoods = (category_id) => {
        setFoodList(foodList => foods.filter(food => food.category_id === category_id));
    }

    return (
        <div className="card rounded-0">
            <div className="card-header bg-white d-flex justify-content-center align-items-center">
                <Link to="#!" onClick={() => setFoodList(foodList => foods)} className="mx-4 text-decoration-none text-black">
                    All
                </Link>
                {
                    categories.map(category => (
                        <Link to="#!" onClick={() => filterFoods(category.id)} key={category.id} className="mx-4 text-decoration-none text-black">
                            {
                                category.name
                            }
                        </Link>
                    ))
                }
            </div>
            <div className="card-body">
                <div className="row">
                    {
                        foodList.map(food => (
                            <FoodItem  key={food.id} food={food}/>
                        ))
                    }
                </div>
            </div>
        </div>
    )
}