geminiSharma-Internship

package.json

@@ -6,9 +6,11 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "ant-design": "^1.0.0",
+    "antd": "^5.14.0",
     "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,62 @@
-import logo from './logo.svg';
+import React, { useState } from 'react';
 import './App.css';
+import foods from './foods.json';
+import {Button, Row, Col, Alert } from 'antd';
+import FoodBox from './component/FoodBox';
+import AddFoodForm from './component/AddFoodForm';
+import Search from './component/Search';
 
 function App() {
+  const [foodList, setFoodList] = useState(foods);
+  const [showAddForm, setShowAddForm] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const deleteFood = (index) => {
+    const updatedList = [...foodList];
+    updatedList.splice(index, 1);
+    setFoodList(updatedList);
+  };
+
+  const addFood = (newFood) => {
+    setFoodList([...foodList, newFood]);
+    setShowAddForm(false);
+  };
+
   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>
+      <h1>Food List</h1>
+
+      <Search value={searchTerm} onChange={setSearchTerm} />
+      <Row gutter={[16, 16]}>
+        {foodList
+            .filter((food) =>
+              food.name.toLowerCase().includes(searchTerm.toLowerCase())
+            )
+            .map((food, index) => (
+              <Col key={index} xs={24} sm={12} md={8} lg={6}>
+                <FoodBox food={food} onDelete={() => deleteFood(index)} />
+              </Col>
+          ))}
+      </Row>
+      <Button onClick={() => setShowAddForm(!showAddForm)}>
+        {showAddForm ? 'Hide Form' : 'Add New Food'}
+      </Button>
+      {showAddForm && <AddFoodForm onAdd={addFood} />}
+
+      {(foodList.length === 0 || 
+        (foodList.filter((food) =>
+          food.name.toLowerCase().includes(searchTerm.toLowerCase())
+        ).length === 0)) && (
+        <Alert
+          message="No matching food items found. Please try a different search term or add some food."
+          type="info"
+          showIcon
+          style={{ margin: '16px 200px 0px 200px' }}
+        />
+      )}
+
     </div>
   );
 }
 
-export default App;
+export default App;

src/component/AddFoodForm.js

@@ -0,0 +1,66 @@
+// src/components/AddFoodForm.js
+
+import React, { useState } from 'react';
+import { Input, Button } from 'antd';
+
+const AddFoodForm = ({ onAdd }) => {
+  const [food, setFood] = useState({
+    name: '',
+    image: '',
+    calories: '',
+    servings: ''
+  });
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setFood({
+      ...food,
+      [name]: value
+    });
+  };
+
+  const handleSubmit = () => {
+    onAdd(food);
+    setFood({
+      name: '',
+      image: '',
+      calories: '',
+      servings: ''
+    });
+  };
+
+  return (
+    <div style={{display: "grid", gap: "10px", margin: "0px 100px 0px 100px" }}>
+      <h2>Add New Food</h2>
+      <Input
+        placeholder="Name"
+        name="name"
+        value={food.name}
+        onChange={handleInputChange}
+      />
+      <Input
+        placeholder="Image URL"
+        name="image"
+        value={food.image}
+        onChange={handleInputChange}
+      />
+      <Input
+        placeholder="Calories"
+        name="calories"
+        value={food.calories}
+        onChange={handleInputChange}
+      />
+      <Input
+        placeholder="Servings"
+        name="servings"
+        value={food.servings}
+        onChange={handleInputChange}
+      />
+      <Button type="primary" onClick={handleSubmit}>
+        Add Food
+      </Button>
+    </div>
+  );
+};
+
+export default AddFoodForm;

src/component/FoodBox.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Card, Button } from 'antd';
+
+const FoodBox = ({ food, onDelete }) => {
+  const { name, calories, image, servings } = food;
+
+  return (
+    <Card
+      title={name}
+      extra={<Button type="danger" onClick={onDelete}>Delete</Button>}
+      style={{ width: 300, margin: '16px' }}
+    >
+      <img src={image} alt={name} style={{ width: '100%' }} />
+      <p>Calories: {calories}</p>
+      <p>Servings: {servings}</p>
+    </Card>
+  );
+};
+
+export default FoodBox;

src/component/Search.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Input } from 'antd';
+
+const Search = ({ value, onChange }) => {
+  return (
+    <div style={{margin: "0px 200px 0px 200px"}}>
+        <Input
+        placeholder="Search Food..."
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        />
+    </div>
+  );
+};
+
+export default Search;

src/index.js

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