From 201ae37ab687512093102f2722cd644cde8ef7d8 Mon Sep 17 00:00:00 2001 From: harvey Date: Sat, 3 Feb 2024 10:17:25 +0530 Subject: [PATCH] done --- src/App.css | 47 ++++++-------------------- src/App.js | 22 ++++++++---- src/components/ProductRow.js | 22 ++++++++++++ src/components/ProductTable.js | 31 +++++++++++++++++ src/components/ProductsPage.css | 8 +++++ src/components/ProductsPage.js | 60 +++++++++++++++++++++++++++++++++ src/components/SearchBar.js | 23 +++++++++++++ src/components/table.css | 31 +++++++++++++++++ 8 files changed, 201 insertions(+), 43 deletions(-) create mode 100644 src/components/ProductRow.js create mode 100644 src/components/ProductTable.js create mode 100644 src/components/ProductsPage.css create mode 100644 src/components/ProductsPage.js create mode 100644 src/components/SearchBar.js create mode 100644 src/components/table.css diff --git a/src/App.css b/src/App.css index 74b5e05..a3181b8 100644 --- a/src/App.css +++ b/src/App.css @@ -1,38 +1,13 @@ .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: #ffffff; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: rgb(0, 0, 0); } -} - -.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); - } -} +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 3784575..43f9cd0 100644 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,33 @@ -import logo from './logo.svg'; + import './App.css'; +import "./App.css"; +import ProductsPage from "./components/ProductsPage"; + + function App() { return (
- logo -

- Edit src/App.js and save to reload. -

+ - Learn React + +
+ + +
); + + + } -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..13f7afd --- /dev/null +++ b/src/components/ProductRow.js @@ -0,0 +1,22 @@ +import React from 'react' +import './table.css' + +const ProductRow = ({productprop}) => { + return ( + + + {productprop.name} + + {productprop.price} + + + + + + + ) +} + +export default ProductRow \ No newline at end of file diff --git a/src/components/ProductTable.js b/src/components/ProductTable.js new file mode 100644 index 0000000..d166b4d --- /dev/null +++ b/src/components/ProductTable.js @@ -0,0 +1,31 @@ +import React from 'react' +import ProductRow from './ProductRow' +// import './table.css' +import './table.css' + +const ProductTable = ({products}) => { + return ( +
+
+ + + + + + + + + + {products.map((product)=>( + + + ))} + + +
NamePrice
+
+
+ ) +} + +export default ProductTable \ No newline at end of file diff --git a/src/components/ProductsPage.css b/src/components/ProductsPage.css new file mode 100644 index 0000000..b2ee591 --- /dev/null +++ b/src/components/ProductsPage.css @@ -0,0 +1,8 @@ +/* src/components/ProductsPage.css */ + +.checkbox-container { + margin-top: 10px; + } + + + \ No newline at end of file diff --git a/src/components/ProductsPage.js b/src/components/ProductsPage.js new file mode 100644 index 0000000..f83b83a --- /dev/null +++ b/src/components/ProductsPage.js @@ -0,0 +1,60 @@ +import React, { useState } from "react"; +import jsonData from "../data.json"; +import ProductTable from "./ProductTable"; +import SearchBar from "./SearchBar"; +import "./ProductsPage.css" + +function ProductsPage() { + const [query, setQuery] = useState(''); + const [filterProducts, setFilterProducts] = useState(jsonData); + const [inStockOnly, setInStockOnly] = useState(false); + + function setSearch(val) { + return new Promise((resolve) => { + setQuery(val); + resolve(val); + }); + } + + function handleChange(e) { + setSearch(e.target.value) + .then((value) => { + setFilterProducts( + jsonData.filter((val) => + val.name.split(" ").some((word) => + word.toLowerCase().startsWith(value) + ) + ) + ); + }) + .catch((err) => { + console.log(err); + }); + } + + function handleCheckboxChange() { + setInStockOnly(!inStockOnly); + + // Use the updated value of inStockOnly in the filter function + setFilterProducts( + jsonData.filter((product) => (!inStockOnly ? product.inStock : true)) + ); + } + + return ( +
+ + + +
+ ); +} + +export default ProductsPage; diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js new file mode 100644 index 0000000..1f3e710 --- /dev/null +++ b/src/components/SearchBar.js @@ -0,0 +1,23 @@ +import React from 'react' + + +const SearchBar = ({dvalue,onchange}) => { + + const dstyle = { + width:'60%', + height:'40px', + marginTop:'30px' + + } + return ( +
+ +

Store

+

Search

+ + +
+ ) +} + +export default SearchBar \ No newline at end of file diff --git a/src/components/table.css b/src/components/table.css new file mode 100644 index 0000000..87409ee --- /dev/null +++ b/src/components/table.css @@ -0,0 +1,31 @@ +*{ + margin: 50; + padding: 90; + + box-sizing: border-box; + font-family: sans-serif; +} + +.body{ + min-height: 10vh; + display: flex; + justify-content: center; + margin-top: 50px; +} + +table{ + width: 10%; + border-collapse: collapse; +} +th, td{ + padding-left: 20rem; + padding-right: 15rem; + padding-top: 1rem; + padding-bottom: 0.5rem; + +} + +thead{ + background-color: rgb(238, 162, 197); + +} \ No newline at end of file