done

package.json

@@ -8,7 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -1,23 +1,14 @@
-import logo from './logo.svg';
+
 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>
-      </header>
+     <ProductsPage/>
     </div>
   );
 }

src/Product.css

@@ -0,0 +1,28 @@
+/* ProductRow.css */
+
+.product-row {
+    color: black;
+  }
+
+  .product-row.out-of-stock {
+    color: red;
+  }
+
+  /* ProductTable.css */
+
+  .product-table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  .product-table th,
+  .product-table td {
+    border: 1px solid #dddddd;
+    padding: 8px;
+    text-align: left;
+  }
+
+  .product-table th {
+    background-color: #f2f2f2;
+  }
+

src/components/ProductRow.js

@@ -0,0 +1,18 @@
+
+
+import React from 'react';
+import "../Product.css";
+
+function ProductRow({ product }) {
+  const rowClassName = product.inStock ? 'product-row' : 'product-row out-of-stock';
+
+
+  return (
+    <tr className={rowClassName}>
+      <td>{product.name}</td>
+      <td>{product.price}</td>
+    </tr>
+  );
+}
+
+export default ProductRow;

src/components/ProductTable.js

@@ -0,0 +1,27 @@
+
+
+import React from 'react';
+import ProductRow from './ProductRow';
+import "../Product.css";
+
+function ProductTable({ products }) {
+  return (
+    <div>
+      <table className="product-table">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Price</th>
+          </tr>
+        </thead>
+        <tbody>
+          {products.map((product, index) => (
+            <ProductRow key={index} product={product} />
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default ProductTable;

src/components/ProductsPage.js

@@ -0,0 +1,45 @@
+
+
+import React, { useState } from 'react';
+import jsonData from '../data.json';
+import SearchBar from './SearchBar';
+import ProductTable from './ProductTable';
+
+function ProductsPage() {
+  const [products, setProducts] = useState(jsonData);
+  const [filteredProducts, setFilteredProducts] = useState(jsonData);
+  const [showOnlyInStock, setShowOnlyInStock] = useState(false);
+
+
+  const handleSearch = (searchTerm) => {
+    const filtered = products.filter(product =>
+      product.name.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+    setFilteredProducts(filtered);
+  };
+
+  const handleCheckboxChange = (e) => {
+    setShowOnlyInStock(e.target.checked);
+    if (e.target.checked) {
+      const filtered = products.filter(product => product.inStock);
+      setFilteredProducts(filtered);
+    } else {
+      setFilteredProducts(products);
+    }
+  };
+
+
+
+
+
+
+  return (
+    <div>
+      <h1>Store</h1>
+      <SearchBar handleSearch={handleSearch} />
+      <ProductTable products={filteredProducts} />
+    </div>
+  );
+}
+
+export default ProductsPage;

src/components/SearchBar.js

@@ -0,0 +1,17 @@
+
+
+import React from 'react';
+
+function SearchBar({ handleSearch,handleCheckboxChange }) {
+  return (
+    <div>
+      <input type="text" placeholder="Search..." onChange={(e) => handleSearch(e.target.value)} />
+      <label>
+        <input type="checkbox" onChange={handleCheckboxChange} />
+        Only show products in stock
+      </label>
+    </div>
+  );
+}
+
+export default SearchBar;