done

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "antd": "^5.14.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

src/AddFoodForm.js

@@ -0,0 +1,64 @@
+// AddFoodForm.js
+import React, { useState } from 'react';
+import { Input, Button } from 'antd'; 
+//import 'antd/dist/antd.css';
+
+const AddFoodForm = ({ onAddFood }) => {
+  const [formData, setFormData] = useState({
+    name: '',
+    image: '',
+    calories: '',
+    servings: '',
+  });
+
+  const handleChange = (e, field) => {
+    setFormData({
+      ...formData,
+      [field]: e.target.value,
+    });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onAddFood(formData);
+    // Clear form fields after submission
+    setFormData({
+      name: '',
+      image: '',
+      calories: '',
+      servings: '',
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <Input
+        value={formData.name}
+        onChange={(e) => handleChange(e, 'name')}
+        placeholder="Name"
+      />
+      <Input
+        value={formData.image}
+        onChange={(e) => handleChange(e, 'image')}
+        placeholder="Image URL"
+      />
+      <Input
+        value={formData.calories}
+        onChange={(e) => handleChange(e, 'calories')}
+        type="number"
+        placeholder="Calories"
+      />
+      <Input
+        value={formData.servings}
+        onChange={(e) => handleChange(e, 'servings')}
+        type="number"
+        placeholder="Servings"
+      />
+      <Button type="primary" htmlType="submit">
+        Add Food
+      </Button>
+    </form>
+  );
+};
+
+export default AddFoodForm;

src/App.css

@@ -36,3 +36,4 @@
     transform: rotate(360deg);
   }
 }
+

src/App.js

@@ -1,25 +1,47 @@
-import logo from './logo.svg';
+
 import './App.css';
+import React, { useState } from 'react';
+
+import foods from  './foods.json';
+import { Card, Row, Col, Divider, Input, Button } from  'antd';
+import FoodBox from './FoodBox';
+import AddFoodForm from './AddFoodForm';
+import Search from './Search';
+
 
 function App() {
+  const [food, setFoods] = useState(foods);
+  const handleAddFood = (newFood) => {
+    setFoods([...foods, newFood]);
+  };
+
+  const handleSearch = (query) => {
+    const filteredFoods = foods.filter((food) =>
+      food.name.toLowerCase().includes(query.toLowerCase())
+    );
+    setFoods(filteredFoods);
+  };
+
   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>
+    <div>
+      <Search onSearch={handleSearch} /> 
+      <AddFoodForm onAddFood={handleAddFood}/>
+      <h1>Food List</h1>
+      {foods.map((food, index) => (
+       <FoodBox key={index} food={food} />
+
+      ))}
+
     </div>
+
+
+
+
   );
-}
+      }
+
+
+
+
 
 export default App;

src/FoodBox.css

@@ -0,0 +1,10 @@
+/* FoodBox.css */
+.food-section {
+    margin: 20px;
+    border: 1px solid #606060;
+    border-radius: 5px;
+    padding: 1px;
+    display:inline-table;
+  }
+
+

src/FoodBox.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Col, Card, Button } from 'antd'; // Assuming you're using Ant Design components
+import "./FoodBox.css"
+
+
+
+function FoodBox(props) {
+  const { name, calories, image, servings } = props.food;
+
+  return (
+    <div className='food-section'>
+      <Col>
+      <Card
+        title={name}
+        style={{ width: 230, height: 300, margin: 10 }}
+      >
+        <img src={image} height={60} alt={name} />
+        <p>Calories: {calories}</p>
+        <p>Servings: {servings}</p>
+        <p>
+          <b>Total Calories: {calories * servings}</b> kcal
+        </p>
+        <Button type="primary">Delete</Button>
+      </Card>
+    </Col>
+
+    </div>
+
+  );
+}
+
+export default FoodBox;

src/Search.js

@@ -0,0 +1,27 @@
+
+import React, { useState } from 'react';
+import { Input } from 'antd'; // Import Ant Design components
+
+const Search = ({ onSearch }) => {
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const handleChange = (e) => {
+    const query = e.target.value;
+    setSearchQuery(query);
+    onSearch(query);
+  };
+
+  return (
+    <div>
+        <h1>Search</h1>
+         <Input
+      placeholder="Enter Search Query..."
+      value={searchQuery}
+      onChange={handleChange}
+    />
+    </div>
+
+  );
+};
+
+export default Search;

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/reset.css';
+
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(