done

src/App.css

@@ -35,4 +35,4 @@
   to {
     transform: rotate(360deg);
   }
-}
+}

src/App.js

@@ -1,5 +1,7 @@
 import logo from './logo.svg';
 import './App.css';
+import ProductPage from './components/ProductPage';
+
 
 function App() {
   return (
@@ -18,8 +20,10 @@ function App() {
           Learn React
         </a>
       </header>
+
+    <ProductPage />
+
     </div>
   );
 }
-
-export default App;
+export default App;

src/components/ProductPage.jsx

@@ -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 className="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

src/components/ProductRow.css

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

src/components/ProductRow.jsx

@@ -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 

src/components/ProductTable.css

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

src/components/ProductTable.jsx

@@ -0,0 +1,19 @@
+import ProductRow from "./ProductRow";
+import './ProductTable.css';
+
+function ProductTable(props) {
+  function createProduct(product) {
+    return (
+      <ProductRow
+        key={product.id}  // Use a unique identifier as the key
+        name={product.name}
+        price={product.price}
+        stock={product.inStock}
+      />
+    );
+  }
+
+  return <div className='table'>{props.array.map(createProduct)}</div>;
+}
+
+export default ProductTable;

src/components/SearchBar.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+function SearchBar({ filterText, onFilterTextChange, onInStockOnlyChange }) {
+  const handleFilterTextChange = (e) => {
+    onFilterTextChange(e.target.value);
+  };
+
+  const handleInStockOnlyChange = (e) => {
+    onInStockOnlyChange(e.target.checked);
+  };
+
+  return (
+    <form>
+      <label>
+        Search
+      </label>
+      <input
+        type="text"
+        value={filterText}
+        onChange={handleFilterTextChange}
+        style={{width: '100%'}}
+      />
+      <label>
+        <input
+          type="checkbox"
+          onChange={handleInStockOnlyChange}
+        />
+        {' '}
+        Only show products in stock
+      </label>
+    </form>
+  );
+}
+
+export default SearchBar;

src/index.css

@@ -10,4 +10,4 @@ body {
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
-}
+}