From a5fa28ee0ce5d6cb8da5fbc85daf40e61e95e4d1 Mon Sep 17 00:00:00 2001
From: Muhammad Irshad <85778819+Irshadmdk19@users.noreply.github.com>
Date: Fri, 22 Nov 2024 17:54:32 +0530
Subject: [PATCH] Completed all iterations

---
 src/App.js                     | 27 +++++++--------------------
 src/components/ProductRow.js   | 16 ++++++++++++++++
 src/components/ProductTable.js | 22 ++++++++++++++++++++++
 src/components/ProductsPage.js | 32 ++++++++++++++++++++++++++++++++
 src/components/SearchBar.js    | 25 +++++++++++++++++++++++++
 src/index.css                  | 13 -------------
 6 files changed, 102 insertions(+), 33 deletions(-)
 create mode 100644 src/components/ProductRow.js
 create mode 100644 src/components/ProductTable.js
 create mode 100644 src/components/ProductsPage.js
 create mode 100644 src/components/SearchBar.js

diff --git a/src/App.js b/src/App.js
index 3784575..7d16233 100644
--- a/src/App.js
+++ b/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
\ No newline at end of file
diff --git a/src/components/ProductRow.js b/src/components/ProductRow.js
new file mode 100644
index 0000000..74f5360
--- /dev/null
+++ b/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;
diff --git a/src/components/ProductTable.js b/src/components/ProductTable.js
new file mode 100644
index 0000000..4621dce
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/src/components/ProductsPage.js b/src/components/ProductsPage.js
new file mode 100644
index 0000000..1608cc7
--- /dev/null
+++ b/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;
diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js
new file mode 100644
index 0000000..4764f6a
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index ec2585e..e69de29 100644
--- a/src/index.css
+++ b/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;
-}