Kanak-internship

package.json

@@ -6,6 +6,8 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "antd": "^5.22.5",
+    "lab-react-root-nutrition": "file:",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

src/App.js

@@ -1,23 +1,47 @@
-import logo from './logo.svg';
-import './App.css';
+import React, { useState } from 'react';
+import { Row, Col, Divider, Button } from 'antd'; 
+import FoodBox from './components/FoodBox';
+import AddFoodForm from './components/AddFoodForm';
+import SearchBar from './components/SearchBar';
+import foods from './foods.json';  
+import 'antd/dist/reset.css';  
 
 function App() {
+  const [foodList, setFoodList] = useState(foods);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [formVisible, setFormVisible] = useState(false);
+
+  const addFood = (newFood) => {
+    setFoodList([...foodList, newFood]);
+  };
+
+  const deleteFood = (foodName) => {
+    setFoodList(foodList.filter(food => food.name !== foodName));
+  };
+
+  const filteredFoods = foodList.filter(food =>
+    food.name.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
   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>
+      <Button onClick={() => setFormVisible(!formVisible)}>
+        {formVisible ? 'Hide Form' : 'Add New Food'}
+      </Button>
+
+      {formVisible && <AddFoodForm addFood={addFood} />}
+
+      <SearchBar searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
+
+      <Divider>Food List</Divider>  {/* Divider added here */}
+
+      <Row style={{ width: '100%', justifyContent: 'center' }}>
+        {filteredFoods.map(food => (
+          <Col key={food.name} span={8}>
+            <FoodBox food={food} deleteFood={deleteFood} />
+          </Col>
+        ))}
+      </Row>
     </div>
   );
 }

src/components/AddFoodForm.js

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import { Input, Button, Divider } from 'antd'; 
+function AddFoodForm({ addFood }) {
+  const [name, setName] = useState('');
+  const [image, setImage] = useState('');
+  const [calories, setCalories] = useState('');
+  const [servings, setServings] = useState('');
+
+  const handleSubmit = () => {
+    addFood({ name, image, calories, servings });
+    setName('');
+    setImage('');
+    setCalories('');
+    setServings('');
+  };
+
+  return (
+    <form>
+      <Divider>Add Food Entry</Divider>  {/* Divider added here */}
+
+      <label>Name</label>
+      <Input value={name} onChange={e => setName(e.target.value)} type="text" />
+
+      <label>Image</label>
+      <Input value={image} onChange={e => setImage(e.target.value)} type="text" />
+
+      <label>Calories</label>
+      <Input value={calories} onChange={e => setCalories(e.target.value)} type="number" />
+
+      <label>Servings</label>
+      <Input value={servings} onChange={e => setServings(e.target.value)} type="number" />
+
+      <Button type="primary" onClick={handleSubmit}>Create</Button>
+    </form>
+  );
+}
+
+export default AddFoodForm;
+

src/components/FoodBox.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Card, Button } from 'antd';
+
+function FoodBox({ food, deleteFood }) {
+  return (
+    <Card
+      title={food.name}
+      extra={<Button onClick={() => deleteFood(food.name)}>Delete</Button>}
+      style={{ width: 240 }}
+    >
+      <p>Calories: {food.calories}</p>
+      <p>Servings: {food.servings}</p>
+      <img src={food.image} alt={food.name} width={100} />
+    </Card>
+  );
+}
+
+export default FoodBox;

src/components/SearchBar.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Divider, Input } from 'antd';  // Added Divider
+
+function SearchBar({ searchTerm, setSearchTerm }) {
+  return (
+    <>
+      <Divider>Search</Divider>
+
+      <label>Search</label>
+      <Input 
+        value={searchTerm} 
+        onChange={(e) => setSearchTerm(e.target.value)} 
+        type="text" 
+      />
+    </>
+  );
+}
+
+export default SearchBar;
+

src/index.js

@@ -2,16 +2,12 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
-
+ // Correct import
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+