Completed all iterations

src/App.js

@@ -1,25 +1,12 @@
-import logo from './logo.svg';
-import './App.css';
+import React from 'react'
+import ProductsPage from './components/ProductsPage'
 
-function App() {
+const 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>
+    <div>
+      <ProductsPage/>
     </div>
-  );
+  )
 }
 
-export default App;
+export default App

src/components/ProductRow.js

@@ -0,0 +1,16 @@
+import React from "react";
+
+const ProductRow = ({ product }) => {
+  return (
+    <div>
+      <tr>
+        <td className={`border p-2 ${!product.inStock ? "text-red-500" : ""}`}>
+          {product.name}
+        </td>
+        <td className="border p-2">{product.price}</td>
+      </tr>
+    </div>
+  );
+};
+
+export default ProductRow;

src/components/ProductTable.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import ProductRow from './ProductRow'
+
+const ProductTable = ({products}) => {
+  return (
+    <table className="w-full border-collapse border border-gray-300">
+    <thead>
+      <tr>
+        <th className="border p-2">Name</th>
+        <th className="border p-2">Price</th>
+      </tr>
+    </thead>
+    <tbody>
+      {products.map((product) => (
+        <ProductRow key={product.name} product={product} />
+      ))}
+    </tbody>
+  </table>
+  )
+}
+
+export default ProductTable

src/components/ProductsPage.js

@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import jsonData from "../data.json";
+import SearchBar from "./SearchBar";
+import ProductTable from "./ProductTable";
+
+const ProductsPage = () => {
+  const [products, setProducts] = useState(jsonData);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [showInStock, setShowInStock] = useState(false);
+
+  const filteredProducts = products.filter((product) => {
+    const matchesSearch = product.name
+      .toLowerCase()
+      .includes(searchQuery.toLowerCase());
+    const matchesStock = !showInStock || product.inStock;
+    return matchesSearch && matchesStock;
+  });
+  return (
+    <div>
+      <h1>Root Store</h1>
+      <SearchBar
+        searchQuery={searchQuery}
+        setSearchQuery={setSearchQuery}
+        showInStock={showInStock}
+        setShowInStock={setShowInStock} // Pass down state updater for checkbox
+      />
+      <ProductTable products={filteredProducts} />
+    </div>
+  );
+};
+
+export default ProductsPage;

src/components/SearchBar.js

@@ -0,0 +1,25 @@
+import React from 'react'
+
+const SearchBar = ({searchQuery, setSearchQuery, showInStock, setShowInStock}) => {
+  return (
+    <div className="mb-4">
+      <input
+        type="text"
+        placeholder="Search..."
+        value={searchQuery}
+        onChange={(e) => setSearchQuery(e.target.value)}
+        className="border p-2 w-full mb-2"
+      />
+      <label className="flex items-center space-x-2">
+        <input
+          type="checkbox"
+          checked={showInStock}
+          onChange={(e) => setShowInStock(e.target.checked)}
+        />
+        <span>Only show products in stock</span>
+      </label>
+    </div>
+  )
+}
+
+export default SearchBar

src/index.css

@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}