done

package.json

@@ -6,9 +6,10 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "antd": "^5.16.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^3.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -1,25 +1,37 @@
-import logo from './logo.svg';
-import './App.css';
+import React, { useState } from 'react';
+import AddFoodForm from './components/AddFoodForm';
+import FoodBox from './components/FoodBox';
+import Search from './components/Search';
+import foodsData from './components/foods.json';
 
 function App() {
+  const [foods, setFoods] = useState(foodsData);
+
+  const handleAddFood = (newFood) => {
+    setFoods([...foods, newFood]);
+  };
+
+  const handleSearch = (searchTerm) => {
+    const filteredFoods = foodsData.filter(food =>
+      food.name.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+    setFoods(filteredFoods);
+  };
+
+  const handleDelete = (food) => {
+    const updatedFoods = foods.filter(item => item.id !== food.id);
+    setFoods(updatedFoods);
+  };
+
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <AddFoodForm onAddFood={handleAddFood} />
+      <Search onSearch={handleSearch} />
+      {foods.map((food, index) => (
+        <FoodBox key={index} food={food} onDelete={handleDelete} />
+      ))}
     </div>
   );
 }
 
-export default App;
+export default App;

src/components/AddFoodForm.js

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import { Input, Button } from 'antd';
+
+const AddFoodForm = ({ onAddFood }) => {
+  const [food, setFood] = useState({
+    name: '',
+    image: '',
+    calories: '',
+    servings: ''
+  });
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFood({ ...food, [name]: value });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onAddFood(food);
+    setFood({
+      name: '',
+      image: '',
+      calories: '',
+      servings: ''
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div>
+        <Input
+          placeholder="Name"
+          name="name"
+          value={food.name}
+          onChange={handleChange}
+        />
+      </div>
+      <div>
+        <Input
+          placeholder="Image URL"
+          name="image"
+          value={food.image}
+          onChange={handleChange}
+        />
+      </div>
+      <div>
+        <Input
+          placeholder="Calories"
+          name="calories"
+          value={food.calories}
+          onChange={handleChange}
+        />
+      </div>
+      <div>
+        <Input
+          placeholder="Servings"
+          name="servings"
+          value={food.servings}
+          onChange={handleChange}
+        />
+      </div>
+      <div>
+        <Button type="primary" htmlType="submit">
+          Add Food
+        </Button>
+      </div>
+    </form>
+  );
+};
+
+export default AddFoodForm;

src/components/FoodBox.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Button } from 'antd';
+
+const FoodBox = ({ food, onDelete }) => {
+  const { name, calories, image, servings } = food;
+
+  const handleDelete = () => {
+    onDelete(food);
+  };
+
+  return (
+    <div className="food-box">
+      <div>
+        <p>{name}</p>
+        <img src={image} alt={name} style={{ width: '50px' }} />
+      </div>
+      <p>{calories} cal</p>
+      <p>{servings} servings</p>
+      <Button type="danger" onClick={handleDelete}>Delete</Button>
+    </div>
+  );
+};
+
+export default FoodBox;

src/index.js

@@ -3,6 +3,8 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import  'antd/dist/antd.css';
+
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(