lab assignment done

Components/ProductPage.js

@@ -0,0 +1,54 @@
+import data from '../data.json'
+import ProductTable from './ProductTable'
+import React from 'react';
+
+function ProductPage()
+{
+    const [list, setList]=React.useState(data)
+    function Search(arr ,text)
+    {
+        let len=text.length
+        console.log(text)
+        if(len === 0)
+        {
+            setList(data) 
+        }
+        else 
+        {
+        let filteredArray=arr.filter((l) => {
+            if(l.name.substring(0,len).toLowerCase() === text.toLowerCase())
+                return true 
+            else 
+                return false
+        })
+        setList(filteredArray)
+        }
+    }
+    function showStocks(e)
+    {
+        if(e.target.checked)
+        {
+        let filteredArray=list.filter((l) => l.inStock)
+        setList(filteredArray)
+        }
+        else 
+        {
+            let text=document.getElementById('srch').value
+            Search(data ,text)
+        }
+    }
+    return <div>
+           <h1>STORE<i class="fa-solid fa-cart-shopping"></i></h1>
+           <div>
+                <input id='srch' type='text' placeholder='Search product' onChange={(e)=>Search(list ,e.target.value)} style={{width:'400px' , padding:'6px', fontSize:'20px'}}/>
+           </div>
+           <div style={{marginTop : '20px'}}>
+                <input type='checkbox' onChange={showStocks}/>
+                <span>Only show products in stock</span>
+           </div>
+           <ProductTable
+              array={list}
+           />
+    </div>
+}
+export default ProductPage

Components/ProductRow.css

@@ -0,0 +1,6 @@
+.row{
+    display:flex;
+    width:550px;
+    padding:15px;
+    justify-content:space-between;
+}

Components/ProductRow.js

@@ -0,0 +1,13 @@
+import './ProductRow.css'
+
+function ProductRow(props)
+{
+    let color='red';
+    if(props.stock)
+       color='green'
+    return <div className="row" style={{color:color}}>
+        <h3>{props.name}</h3>
+        <h3>{props.price}</h3>
+    </div>
+}
+export default ProductRow

Components/ProductTable.css

@@ -0,0 +1,7 @@
+.table{
+    display:flex;
+    flex-wrap: wrap;
+    width:70%;
+    margin: auto;
+    justify-content: center;
+ }

Components/ProductTable.js

@@ -0,0 +1,18 @@
+import ProductRow from "./ProductRow"
+import './ProductTable.css'
+function ProductTable(props)
+{
+   function createProduct(pro)
+   {
+      return <ProductRow
+                 name={pro.name}
+                 price={pro.price}
+                 stock={pro.inStock}
+              />
+   }
+   return <div className='table'>
+       {(props.array).map((pro)=>createProduct(pro))}
+   </div>
+}
+
+export default ProductTable

src/App.js

@@ -1,5 +1,8 @@
 import logo from './logo.svg';
 import './App.css';
+import  "./App.css";
+import ProductsPage from "./components/ProductsPage";
+
 
 function App() {
   return (
@@ -16,6 +19,11 @@ function App() {
           rel="noopener noreferrer"
         >
           Learn React
+              </a>
+         <div  className="App">
+       <ProductsPage /> 
+
+</div>
         </a>
       </header>
     </div>