Lab Assignment-15

src/App.js

@@ -1,23 +1,11 @@
-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>
+      <h1 className="store-title">Store</h1>
+      <ProductsPage />
     </div>
   );
 }

src/components/ProductRow.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+function ProductRow({ product }) {
+  return (
+    <tr>
+      <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 './css/style.css'
+
+function ProductTable({ products }) {
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Price</th>
+        </tr>
+      </thead>
+      <tbody>
+        {products.map((product) => (
+          <tr
+            key={product.id}
+            className={!product.inStock ? "out-of-stock" : ""}
+          >
+            <td>{product.name}</td>
+            <td>{product.price}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+export default ProductTable;

src/components/ProductsPage.js

@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+import SearchBar from "./SearchBar";
+import ProductTable from "./ProductTable";
+import data from "../data.json"; 
+import "./css/style.css";
+
+function ProductsPage() {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [onlyInStock, setOnlyInStock] = useState(false);
+
+  const handleSearchChange = (query) => {
+    setSearchQuery(query);
+  };
+
+  const handleInStockChange = (event) => {
+    setOnlyInStock(event.target.checked);
+  };
+
+  const filteredProducts = data.filter((product) => {
+    const matchesSearchQuery = product.name
+      .toLowerCase()
+      .includes(searchQuery.toLowerCase());
+    const matchesStockFilter = !onlyInStock || product.inStock;
+    return matchesSearchQuery && matchesStockFilter;
+  });
+
+  return (
+    <div>
+      <div className="search-title">Search</div>
+      <SearchBar
+        searchQuery={searchQuery}
+        onSearchChange={handleSearchChange}
+      />
+      <div className="in-stock-filter">
+        <input
+          type="checkbox"
+          id="in-stock-checkbox"
+          checked={onlyInStock}
+          onChange={handleInStockChange}
+        />
+        <label htmlFor="in-stock-checkbox">Only show products in stock</label>
+      </div>
+      <div className="table-wrapper">
+        <ProductTable products={filteredProducts} />
+      </div>
+    </div>
+  );
+}
+
+export default ProductsPage;

src/components/SearchBar.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import './css/style.css'
+
+function SearchBar({ searchQuery, onSearchChange }) {
+  return (
+    <div className="search-bar">
+      <input
+        type="text"
+        value={searchQuery}
+        onChange={(e) => onSearchChange(e.target.value)}
+      />
+    </div>
+  );
+}
+
+export default SearchBar

src/components/style.css

@@ -0,0 +1,77 @@
+.table-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center; 
+    width: 1500px;
+    margin-left: 0px;
+    padding-left: 200px;    
+  }
+
+  table {
+    width: 100%; 
+    max-width: 2000px; 
+    border-collapse: collapse; 
+  }
+
+  table th:first-child
+  {
+    width: 100%;    
+    padding-left: 0px;
+    padding-right: -300px;               
+  }
+
+  table th:nth-child(2) {
+    width: 300px; 
+    margin-left: 500px;
+}
+
+  table th:first-child,
+  table th:nth-child(2) 
+  {
+    background-color: rgb(209, 213, 222);
+    color: grey;    
+  }
+
+  table th,
+  table td {
+    padding-top: 20px;
+    padding-bottom: 20px;
+    padding-right: 300px;
+    text-align: center; 
+  }
+
+  td:first-child {
+    width: 300px; 
+    padding-left: 0px;
+  }
+
+  table th:nth-child(2) {
+    width: 150px; 
+    padding-right: -200px;
+  }
+
+   th:last-child,
+  .search-bar {
+    width: 100%; 
+    margin-bottom: 20px; 
+}
+
+.search-bar input {
+    width: 80%;
+    padding: 8px;
+    box-sizing: border-box; 
+}
+
+div.search-title {
+  padding-bottom: 15px !important;
+}
+
+.in-stock-filter {
+  padding-bottom: 50px;
+}
+
+
+.out-of-stock {
+  color: red;
+
+}