Assignment

src/App.js

@@ -1,25 +1,32 @@
-import logo from './logo.svg';
 import './App.css';
 
+import  "./App.css";
+import ProductsPage from "./components/ProductsPage";
+
+
 function App() {
   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>
+         <div  className="App">
+       <ProductsPage /> 
+
+</div>
       </header>
     </div>
   );
+
+
+
 }
 
 export default App;

src/components/ProductPage.css

@@ -0,0 +1,8 @@
+/* src/components/ProductsPage.css */
+
+.checkbox-container {
+    margin-top: 10px;
+  }
+
+
+

src/components/ProductPage.js

@@ -0,0 +1,60 @@
+import React, { useState } from "react";
+import jsonData from "../data.json";
+import ProductTable from "./ProductTable";
+import SearchBar from "./SearchBar";
+import "./ProductsPage.css"
+
+function ProductsPage() {
+  const [query, setQuery] = useState('');
+  const [filterProducts, setFilterProducts] = useState(jsonData);
+  const [inStockOnly, setInStockOnly] = useState(false);
+
+  function setSearch(val) {
+    return new Promise((resolve) => {
+      setQuery(val);
+      resolve(val);
+    });
+  }
+
+  function handleChange(e) {
+    setSearch(e.target.value)
+      .then((value) => {
+        setFilterProducts(
+          jsonData.filter((val) =>
+            val.name.split(" ").some((word) =>
+              word.toLowerCase().startsWith(value)
+            )
+          )
+        );
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }
+
+  function handleCheckboxChange() {
+    setInStockOnly(!inStockOnly);
+
+    // Use the updated value of inStockOnly in the filter function
+    setFilterProducts(
+      jsonData.filter((product) => (!inStockOnly ? product.inStock : true))
+    );
+  }
+
+  return (
+    <div className="checkbox-container">
+      <SearchBar dvalue={query} onchange={handleChange} />
+      <label>
+        <input
+          type="checkbox"
+          checked={inStockOnly}
+          onChange={handleCheckboxChange}
+        />
+        In Stock Only
+      </label>
+      <ProductTable products={filterProducts} />
+    </div>
+  );
+}
+
+export default ProductsPage;

src/components/ProductRow.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import './table.css'
+
+const ProductRow = ({productprop}) => {
+  return (
+
+       <tr key={productprop.id}>
+        <td style = {{ color: productprop.inStock ?
+             'black' : 'red'
+        }}>{productprop.name}</td>
+
+        <td>{productprop.price}</td>
+
+
+       </tr>
+
+  )
+}
+
+export default ProductRow

src/components/ProductTable.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import ProductRow from './ProductRow'
+// import './table.css'
+import './table.css'
+
+const ProductTable = ({products}) => {
+  return (
+    <div className='body'>
+    <section className='tabody'>
+      <table>
+      <thead>
+       <tr>
+        <th>Name</th>
+        <th>Price</th>
+
+       </tr>
+    </thead>
+    <tbody>
+        {products.map((product)=>(
+
+             <ProductRow productprop={product}/>
+        ))}
+
+    </tbody>
+      </table>
+    </section>
+    </div>
+  )
+}
+
+export default ProductTable

src/components/SearchBar.js

@@ -0,0 +1,23 @@
+import React from 'react'
+
+
+const SearchBar = ({dvalue,onchange}) => {
+
+    const dstyle = {
+        width:'60%',
+        height:'40px',
+        marginTop:'30px'
+
+    }
+  return (
+    <div style={{textAlign:'center', marginTop:'50px'}}>
+
+        <h1>Store</h1>
+        <h3 style={{marginTop:'50px'}} >Search</h3>
+        <input placeholder='Search' style={dstyle}  value={dvalue} onChange={onchange}/>
+
+    </div>
+  )
+}
+
+export default SearchBar

src/components/Table.css

@@ -0,0 +1,31 @@
+*{
+    margin: 50;
+    padding: 90;
+
+    box-sizing: border-box;
+    font-family: sans-serif;
+}
+
+.body{
+    min-height: 10vh;
+    display: flex;
+    justify-content: center;
+    margin-top: 50px;
+}
+
+table{
+    width: 10%;
+    border-collapse: collapse;
+}
+th, td{
+    padding-left: 20rem;
+    padding-right: 15rem;
+    padding-top: 1rem;
+    padding-bottom: 0.5rem;
+
+}
+
+thead{
+    background-color: rgb(238, 162, 197);
+
+}