web-dev-open · premkumardev909 · Nov 22, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,5 +34,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.15"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -2,42 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
+
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
 
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/src/App.css b/src/App.css
@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

diff --git a/src/App.js b/src/App.js
@@ -1,25 +1,12 @@
-import logo from './logo.svg';
-import './App.css';
+import "./index.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>
-    </div>
-  );
+    return (
+        <div className="App min-h-screen bg-gray-100 p-5">
+            <ProductsPage />
+        </div>
+    );
 }
 
-export default App;
+export default App;
diff --git a/src/components/ProductRow.js b/src/components/ProductRow.js
@@ -0,0 +1,12 @@
+function ProductRow({ product }) {
+    return (
+        <tr style={{ color: product.inStock ? 'black' : 'red' }}>
+            <td className="py-2 px-4 border-b">{product.name}</td>
+            <td className="py-2 px-4 border-b">{product.category}</td>
+            <td className="py-2 px-4 border-b">{product.price}</td>
+            <td className="py-2 px-4 border-b">{product.inStock ? 'Yes' : 'No'}</td>
+        </tr>
+    );
+}
+
+export default ProductRow;
diff --git a/src/components/ProductTable.js b/src/components/ProductTable.js
@@ -0,0 +1,23 @@
+import ProductRow from './ProductRow';
+
+function ProductTable({ products }) {
+    return (
+        <table className="min-w-full bg-white border border-gray-300">
+            <thead>
+                <tr className="bg-gray-200">
+                    <th className="py-2 px-4 border-b">Name</th>
+                    <th className="py-2 px-4 border-b">Category</th>
+                    <th className="py-2 px-4 border-b">Price</th>
+                    <th className="py-2 px-4 border-b">In Stock</th>
+                </tr>
+            </thead>
+            <tbody>
+                {products.map((product) => (
+                    <ProductRow key={product.name} product={product} />
+                ))}
+            </tbody>
+        </table>
+    );
+}
+
+export default ProductTable;
diff --git a/src/components/ProductsPage.js b/src/components/ProductsPage.js
@@ -0,0 +1,31 @@
+import { useState } from 'react';
+import jsonData from '../data.json';
+import SearchBar from './SearchBar';
+import ProductTable from './ProductTable';
+
+function ProductsPage() {
+    const [products, setProducts] = useState(jsonData);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [inStockOnly, setInStockOnly] = useState(false);
+
+    const filteredProducts = products.filter(product => {
+        const matchesSearchTerm = product.name.toLowerCase().includes(searchTerm.toLowerCase());
+        const matchesInStock = !inStockOnly || product.inStock;
+        return matchesSearchTerm && matchesInStock;
+    });
+
+    return (
+        <div>
+            <h1 className="text-2xl font-bold mb-4">Root Store</h1>
+            <SearchBar 
+                searchTerm={searchTerm} 
+                setSearchTerm={setSearchTerm} 
+                inStockOnly={inStockOnly} 
+                setInStockOnly={setInStockOnly} 
+            />
+            <ProductTable products={filteredProducts} />
+        </div>
+    );
+}
+
+export default ProductsPage;
diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js
@@ -0,0 +1,24 @@
+function SearchBar({ searchTerm, setSearchTerm, inStockOnly, setInStockOnly }) {
+    return (
+        <div className="mb-4">
+            <input 
+                type="text" 
+                placeholder="Search..." 
+                value={searchTerm} 
+                onChange={(e) => setSearchTerm(e.target.value)} 
+                className="border border-gray-300 rounded p-2 mr-2"
+            />
+            <label className="flex items-center">
+                <input 
+                    type="checkbox" 
+                    checked={inStockOnly} 
+                    onChange={(e) => setInStockOnly(e.target.checked)} 
+                    className="mr-1"
+                />
+                Only show products in stock
+            </label>
+        </div>
+    );
+}
+
+export default SearchBar;
diff --git a/src/index.css b/src/index.css
@@ -1,13 +1,3 @@
-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;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/logo.svg b/src/logo.svg
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{html,js}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}