done 'Thinking In React' assignment. Refactored my own code.

src/App.css

@@ -36,3 +36,5 @@
     transform: rotate(360deg);
   }
 }
+
+

src/App.js

@@ -1,25 +1,14 @@
-import logo from './logo.svg';
-import './App.css';
+import React from 'react';
+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>
   );
 }
 
-export default App;
+export default App;

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,24 @@
+import React from 'react';
+import ProductRow from './ProductRow';
+import './css/style.css';
+
+function ProductTable({ products }) {
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Price</th>
+
+        </tr>
+      </thead>
+      <tbody>
+        {products.map(product => (
+          <ProductRow key={product.id} product={product} />
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+export default ProductTable;

src/components/ProductsPage.js

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import SearchBar from './SearchBar';
+import ProductTable from './ProductTable';
+import data from '../data.json'; // Assuming this is the correct path to your data
+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,15 @@
+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/css/style.css

@@ -0,0 +1,71 @@
+.table-wrapper {
+    display: flex;
+    justify-content: center; /* Centers horizontally */
+    align-items: center; /* Centers vertically */
+    width: 1500px;
+    margin-left: 0px;
+    padding-left: 200px;    
+  }
+
+  table {
+    width: 100%; 
+    max-width: 2000px; /* Adjust this based on your design */
+    border-collapse: collapse; /* Ensures padding adds to cell size */
+  }
+
+  table th:first-child /* Width, Padding and Gap for Name heading */
+  {
+    width: 100%;    
+    padding-left: 0px;
+    padding-right: -300px;               
+  }
+
+  table th:nth-child(2) {
+    width: 300px; /* Increased width for the Price column */
+    margin-left: 500px;
+}
+
+  table th:first-child, /* Name heading */
+  table th:nth-child(2) /* Price heading */ 
+  {
+    background-color: lightgrey;
+    color: grey;    
+  }
+
+  table th,
+  table td {
+    padding-top: 20px;
+    padding-bottom: 20px;
+    padding-right: 300px;
+    text-align: center; /* Ensures content is aligned as per requirement */
+  }
+
+  td:first-child {
+    width: 300px; /* Width for the Name column */        
+    padding-left: 0px; /* Add padding to simulate margin */    
+  }
+
+  table th:nth-child(2) {
+    width: 150px; /* Width for the Price column */
+    padding-right: -200px;
+  }
+
+   th:last-child,
+  .search-bar {
+    width: 100%; /* Make the search bar take up 100% of its parent width */
+    margin-bottom: 20px; /* Optional: Adds some space below the search bar */
+}
+
+.search-bar input {
+    width: 80%; /* Make the input inside the search bar take up 100% of the search bar's width */
+    padding: 8px; /* Adjust padding as needed for better spacing */
+    box-sizing: border-box; /* Ensures padding is included in the element's total width and height */
+}
+
+div.search-title {
+  padding-bottom: 15px !important;
+}
+
+.in-stock-filter {
+  padding-bottom: 50px;
+}

src/index.css

@@ -11,3 +11,14 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+div.App {
+  width: 100%;
+  text-align: center;
+}
+
+.store-title {
+   font-weight: 400;
+   font-size: 36px;
+}
+