From 27f3f8c229e03c2cae62cf4531739f23f810255f Mon Sep 17 00:00:00 2001
From: sai preetham ravula <160527233+VSPR1@users.noreply.github.com>
Date: Sun, 16 Jun 2024 12:34:08 +0530
Subject: [PATCH 1/6] Update App.js

---
 src/App.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/App.js b/src/App.js
index 3784575..1fe0570 100644
--- a/src/App.js
+++ b/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>

From 09cc7d6e3729bc2779949c900d826e4a28cb60f3 Mon Sep 17 00:00:00 2001
From: sai preetham ravula <160527233+VSPR1@users.noreply.github.com>
Date: Mon, 17 Jun 2024 23:15:59 +0530
Subject: [PATCH 2/6] Create ProductRow.js

---
 Components/ProductRow.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 Components/ProductRow.js

diff --git a/Components/ProductRow.js b/Components/ProductRow.js
new file mode 100644
index 0000000..37b8baf
--- /dev/null
+++ b/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

From f260dbfcec7e0f055d294e5f05a8ad6f31fbab30 Mon Sep 17 00:00:00 2001
From: sai preetham ravula <160527233+VSPR1@users.noreply.github.com>
Date: Mon, 17 Jun 2024 23:16:43 +0530
Subject: [PATCH 3/6] Create ProductTable.css

---
 Components/ProductTable.css | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 Components/ProductTable.css

diff --git a/Components/ProductTable.css b/Components/ProductTable.css
new file mode 100644
index 0000000..c24ddc3
--- /dev/null
+++ b/Components/ProductTable.css
@@ -0,0 +1,7 @@
+.table{
+    display:flex;
+    flex-wrap: wrap;
+    width:70%;
+    margin: auto;
+    justify-content: center;
+ }

From 63fc09764dfdf5e8d0203d1e747e34951a24d93f Mon Sep 17 00:00:00 2001
From: sai preetham ravula <160527233+VSPR1@users.noreply.github.com>
Date: Mon, 17 Jun 2024 23:17:14 +0530
Subject: [PATCH 4/6] Create ProductRow.css

---
 Components/ProductRow.css | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 Components/ProductRow.css

diff --git a/Components/ProductRow.css b/Components/ProductRow.css
new file mode 100644
index 0000000..962c893
--- /dev/null
+++ b/Components/ProductRow.css
@@ -0,0 +1,6 @@
+.row{
+    display:flex;
+    width:550px;
+    padding:15px;
+    justify-content:space-between;
+}

From 3c2f981b48376b94b6823a9b354e09239a5a51de Mon Sep 17 00:00:00 2001
From: sai preetham ravula <160527233+VSPR1@users.noreply.github.com>
Date: Mon, 17 Jun 2024 23:17:42 +0530
Subject: [PATCH 5/6] Create ProductTable.js

---
 Components/ProductTable.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 Components/ProductTable.js

diff --git a/Components/ProductTable.js b/Components/ProductTable.js
new file mode 100644
index 0000000..bb8b0a2
--- /dev/null
+++ b/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

From b86a0461c9ec74987ad89b94216626c98f628829 Mon Sep 17 00:00:00 2001
From: sai preetham ravula <160527233+VSPR1@users.noreply.github.com>
Date: Mon, 17 Jun 2024 23:18:15 +0530
Subject: [PATCH 6/6] Create ProductPage.js

---
 Components/ProductPage.js | 54 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 Components/ProductPage.js

diff --git a/Components/ProductPage.js b/Components/ProductPage.js
new file mode 100644
index 0000000..03d8574
--- /dev/null
+++ b/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