From e0b73c588d1a7aed04ad33099711dbeb39514c0c Mon Sep 17 00:00:00 2001 From: Dipankar Ojha Date: Fri, 12 Sep 2025 16:05:35 -0400 Subject: [PATCH 1/8] initial commit --- package-lock.json | 235 +++++++++++++----- package.json | 4 +- src/App.jsx | 79 +++--- src/CartItem.jsx | 27 +- src/CartSlice.jsx | 19 +- src/ProductList.jsx | 590 +++++++++++++++++++++++--------------------- vite.config.js | 2 +- 7 files changed, 572 insertions(+), 384 deletions(-) diff --git a/package-lock.json b/package-lock.json index af7843d848..3e89598b75 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,7 +21,7 @@ "eslint-plugin-react": "^7.34.1", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.6", - "gh-pages": "^6.1.1", + "gh-pages": "^6.3.0", "vite": "^5.2.0" } }, @@ -1364,24 +1364,13 @@ } }, "node_modules/array-union": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz", - "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==", - "dev": true, - "dependencies": { - "array-uniq": "^1.0.1" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/array-uniq": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz", - "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz", + "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==", "dev": true, + "license": "MIT", "engines": { - "node": ">=0.10.0" + "node": ">=8" } }, "node_modules/array.prototype.findlast": { @@ -1524,6 +1513,19 @@ "concat-map": "0.0.1" } }, + "node_modules/braces": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", + "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", + "dev": true, + "license": "MIT", + "dependencies": { + "fill-range": "^7.1.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/browserslist": { "version": "4.23.0", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz", @@ -1634,12 +1636,13 @@ "dev": true }, "node_modules/commander": { - "version": "11.1.0", - "resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz", - "integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==", + "version": "13.1.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-13.1.0.tgz", + "integrity": "sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw==", "dev": true, + "license": "MIT", "engines": { - "node": ">=16" + "node": ">=18" } }, "node_modules/commondir": { @@ -1788,6 +1791,19 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/dir-glob": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", + "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==", + "dev": true, + "license": "MIT", + "dependencies": { + "path-type": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/doctrine": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", @@ -2336,6 +2352,36 @@ "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", "dev": true }, + "node_modules/fast-glob": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz", + "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@nodelib/fs.stat": "^2.0.2", + "@nodelib/fs.walk": "^1.2.3", + "glob-parent": "^5.1.2", + "merge2": "^1.3.0", + "micromatch": "^4.0.8" + }, + "engines": { + "node": ">=8.6.0" + } + }, + "node_modules/fast-glob/node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, + "license": "ISC", + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/fast-json-stable-stringify": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", @@ -2395,6 +2441,19 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/fill-range": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", + "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", + "dev": true, + "license": "MIT", + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/find-cache-dir": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz", @@ -2573,18 +2632,19 @@ } }, "node_modules/gh-pages": { - "version": "6.1.1", - "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-6.1.1.tgz", - "integrity": "sha512-upnohfjBwN5hBP9w2dPE7HO5JJTHzSGMV1JrLrHvNuqmjoYHg6TBrCcnEoorjG/e0ejbuvnwyKMdTyM40PEByw==", + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-6.3.0.tgz", + "integrity": "sha512-Ot5lU6jK0Eb+sszG8pciXdjMXdBJ5wODvgjR+imihTqsUWF2K6dJ9HST55lgqcs8wWcw6o6wAsUzfcYRhJPXbA==", "dev": true, + "license": "MIT", "dependencies": { "async": "^3.2.4", - "commander": "^11.0.0", + "commander": "^13.0.0", "email-addresses": "^5.0.0", "filenamify": "^4.3.0", "find-cache-dir": "^3.3.1", "fs-extra": "^11.1.1", - "globby": "^6.1.0" + "globby": "^11.1.0" }, "bin": { "gh-pages": "bin/gh-pages.js", @@ -2651,19 +2711,24 @@ } }, "node_modules/globby": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz", - "integrity": "sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==", + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz", + "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==", "dev": true, + "license": "MIT", "dependencies": { - "array-union": "^1.0.1", - "glob": "^7.0.3", - "object-assign": "^4.0.1", - "pify": "^2.0.0", - "pinkie-promise": "^2.0.0" + "array-union": "^2.1.0", + "dir-glob": "^3.0.1", + "fast-glob": "^3.2.9", + "ignore": "^5.2.0", + "merge2": "^1.4.1", + "slash": "^3.0.0" }, "engines": { - "node": ">=0.10.0" + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/gopd": { @@ -3029,6 +3094,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.12.0" + } + }, "node_modules/is-number-object": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz", @@ -3370,6 +3445,30 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/merge2": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", + "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 8" + } + }, + "node_modules/micromatch": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", + "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", + "dev": true, + "license": "MIT", + "dependencies": { + "braces": "^3.0.3", + "picomatch": "^2.3.1" + }, + "engines": { + "node": ">=8.6" + } + }, "node_modules/minimatch": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", @@ -3639,40 +3738,33 @@ "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", "dev": true }, + "node_modules/path-type": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", + "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, "node_modules/picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", "dev": true }, - "node_modules/pify": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", - "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/pinkie": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz", - "integrity": "sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==", + "node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", "dev": true, + "license": "MIT", "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/pinkie-promise": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz", - "integrity": "sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==", - "dev": true, - "dependencies": { - "pinkie": "^2.0.0" + "node": ">=8.6" }, - "engines": { - "node": ">=0.10.0" + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" } }, "node_modules/pkg-dir": { @@ -4178,6 +4270,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/slash": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", + "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, "node_modules/source-map-js": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", @@ -4337,6 +4439,19 @@ "node": ">=4" } }, + "node_modules/to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-number": "^7.0.0" + }, + "engines": { + "node": ">=8.0" + } + }, "node_modules/trim-repeated": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz", diff --git a/package.json b/package.json index b7d4c1d1d4..bebf32a8c8 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,8 @@ "type": "module", "scripts": { "dev": "vite", + "predeploy": "npm run build", + "deploy": "gh-pages -d dist", "build": "vite build", "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", "preview": "vite build; vite preview --host" @@ -23,7 +25,7 @@ "eslint-plugin-react": "^7.34.1", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.6", - "gh-pages": "^6.1.1", + "gh-pages": "^6.3.0", "vite": "^5.2.0" } } diff --git a/src/App.jsx b/src/App.jsx index 799372d75d..57be8b808c 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,49 +1,54 @@ - import React, { useState } from 'react'; import ProductList from './ProductList'; -import './App.css'; -import AboutUs from './AboutUs'; +import CartItem from './CartItem'; -function App() { - - const [showProductList, setShowProductList] = useState(false); +const App = () => { + const [showCart, setShowCart] = useState(false); // View toggle - const handleGetStartedClick = () => { - setShowProductList(true); + const handleViewCart = () => { + setShowCart(true); }; - const handleHomeClick = () => { - setShowProductList(false); + const handleContinueShopping = () => { + setShowCart(false); }; return ( -
-
-
-
-
-

Welcome To Paradise Nursery

-
-

Where Green Meets Serenity

- - -
-
- -
-
- -
-
- -
+
+
+

🌿 Plant Shop

+ +
+ +
+ {showCart ? ( + + ) : ( + + )} +
); -} - -export default App; - - +}; +export default App; \ No newline at end of file diff --git a/src/CartItem.jsx b/src/CartItem.jsx index e06317433f..1a7985a9ea 100644 --- a/src/CartItem.jsx +++ b/src/CartItem.jsx @@ -9,27 +9,48 @@ const CartItem = ({ onContinueShopping }) => { // Calculate total amount for all products in the cart const calculateTotalAmount = () => { + let total = 0; + + cart.forEach((item) => { + // Convert cost string like "$15" to number: 15 + const costNumber = parseFloat(item.cost.substring(1)); + + // Multiply cost by quantity and add to total + total += costNumber * item.quantity; + }); + + return total; }; const handleContinueShopping = (e) => { + e.preventDefault(); + onContinueShopping(e); }; const handleIncrement = (item) => { + dispatch(updateQuantity({ name: item.name, quantity: item.quantity + 1 })); }; const handleDecrement = (item) => { - + if (item.quantity > 1) { + dispatch(updateQuantity({ name: item.name, quantity: item.quantity - 1 })); + } else { + dispatch(removeItem(item.name)); // Remove the item if quantity becomes 0 + } }; const handleRemove = (item) => { + dispatch(removeItem(item.name)); }; // Calculate total cost based on quantity for an item const calculateTotalCost = (item) => { + const unitPrice = parseFloat(item.cost.substring(1)); // Convert "$15" β†’ 15 + return unitPrice * item.quantity; }; return ( @@ -63,6 +84,4 @@ const CartItem = ({ onContinueShopping }) => { ); }; -export default CartItem; - - +export default CartItem; \ No newline at end of file diff --git a/src/CartSlice.jsx b/src/CartSlice.jsx index 32b8761ed0..cd2be8ba65 100644 --- a/src/CartSlice.jsx +++ b/src/CartSlice.jsx @@ -3,21 +3,28 @@ import { createSlice } from '@reduxjs/toolkit'; export const CartSlice = createSlice({ name: 'cart', initialState: { - items: [], // Initialize items as an empty array + items: [], }, reducers: { addItem: (state, action) => { - + const item = action.payload; + const existingItem = state.items.find(i => i.name === item.name); + if (!existingItem) { + state.items.push({ ...item, quantity: 1 }); // Add new item with quantity 1 + } }, removeItem: (state, action) => { + state.items = state.items.filter(item => item.name !== action.payload); }, updateQuantity: (state, action) => { - - + const { name, quantity } = action.payload; + const item = state.items.find(i => i.name === name); + if (item) { + item.quantity = quantity; + } }, }, }); export const { addItem, removeItem, updateQuantity } = CartSlice.actions; - -export default CartSlice.reducer; +export default CartSlice.reducer; \ No newline at end of file diff --git a/src/ProductList.jsx b/src/ProductList.jsx index 7682c04fc4..01b1814c05 100644 --- a/src/ProductList.jsx +++ b/src/ProductList.jsx @@ -1,287 +1,327 @@ -import React, { useState, useEffect } from 'react'; -import './ProductList.css' +import React, { useState } from 'react'; +import './ProductList.css'; import CartItem from './CartItem'; +import { useDispatch, useSelector } from 'react-redux'; +import { addItem } from './CartSlice'; + function ProductList({ onHomeClick }) { - const [showCart, setShowCart] = useState(false); - const [showPlants, setShowPlants] = useState(false); // State to control the visibility of the About Us page + const [showCart, setShowCart] = useState(false); + const [addedToCart, setAddedToCart] = useState({}); + const dispatch = useDispatch(); - const plantsArray = [ - { - category: "Air Purifying Plants", - plants: [ - { - name: "Snake Plant", - image: "https://cdn.pixabay.com/photo/2021/01/22/06/04/snake-plant-5939187_1280.jpg", - description: "Produces oxygen at night, improving air quality.", - cost: "$15" - }, - { - name: "Spider Plant", - image: "https://cdn.pixabay.com/photo/2018/07/11/06/47/chlorophytum-3530413_1280.jpg", - description: "Filters formaldehyde and xylene from the air.", - cost: "$12" - }, - { - name: "Peace Lily", - image: "https://cdn.pixabay.com/photo/2019/06/12/14/14/peace-lilies-4269365_1280.jpg", - description: "Removes mold spores and purifies the air.", - cost: "$18" - }, - { - name: "Boston Fern", - image: "https://cdn.pixabay.com/photo/2020/04/30/19/52/boston-fern-5114414_1280.jpg", - description: "Adds humidity to the air and removes toxins.", - cost: "$20" - }, - { - name: "Rubber Plant", - image: "https://cdn.pixabay.com/photo/2020/02/15/11/49/flower-4850729_1280.jpg", - description: "Easy to care for and effective at removing toxins.", - cost: "$17" - }, - { - name: "Aloe Vera", - image: "https://cdn.pixabay.com/photo/2018/04/02/07/42/leaf-3283175_1280.jpg", - description: "Purifies the air and has healing properties for skin.", - cost: "$14" - } - ] - }, - { - category: "Aromatic Fragrant Plants", - plants: [ - { - name: "Lavender", - image: "https://images.unsplash.com/photo-1611909023032-2d6b3134ecba?q=80&w=1074&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", - description: "Calming scent, used in aromatherapy.", - cost: "$20" - }, - { - name: "Jasmine", - image: "https://images.unsplash.com/photo-1592729645009-b96d1e63d14b?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", - description: "Sweet fragrance, promotes relaxation.", - cost: "$18" - }, - { - name: "Rosemary", - image: "https://cdn.pixabay.com/photo/2019/10/11/07/12/rosemary-4541241_1280.jpg", - description: "Invigorating scent, often used in cooking.", - cost: "$15" - }, - { - name: "Mint", - image: "https://cdn.pixabay.com/photo/2016/01/07/18/16/mint-1126282_1280.jpg", - description: "Refreshing aroma, used in teas and cooking.", - cost: "$12" - }, - { - name: "Lemon Balm", - image: "https://cdn.pixabay.com/photo/2019/09/16/07/41/balm-4480134_1280.jpg", - description: "Citrusy scent, relieves stress and promotes sleep.", - cost: "$14" - }, - { - name: "Hyacinth", - image: "https://cdn.pixabay.com/photo/2019/04/07/20/20/hyacinth-4110726_1280.jpg", - description: "Hyacinth is a beautiful flowering plant known for its fragrant.", - cost: "$22" - } - ] - }, - { - category: "Insect Repellent Plants", - plants: [ - { - name: "oregano", - image: "https://cdn.pixabay.com/photo/2015/05/30/21/20/oregano-790702_1280.jpg", - description: "The oregano plants contains compounds that can deter certain insects.", - cost: "$10" - }, - { - name: "Marigold", - image: "https://cdn.pixabay.com/photo/2022/02/22/05/45/marigold-7028063_1280.jpg", - description: "Natural insect repellent, also adds color to the garden.", - cost: "$8" - }, - { - name: "Geraniums", - image: "https://cdn.pixabay.com/photo/2012/04/26/21/51/flowerpot-43270_1280.jpg", - description: "Known for their insect-repelling properties while adding a pleasant scent.", - cost: "$20" - }, - { - name: "Basil", - image: "https://cdn.pixabay.com/photo/2016/07/24/20/48/tulsi-1539181_1280.jpg", - description: "Repels flies and mosquitoes, also used in cooking.", - cost: "$9" - }, - { - name: "Lavender", - image: "https://images.unsplash.com/photo-1611909023032-2d6b3134ecba?q=80&w=1074&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", - description: "Calming scent, used in aromatherapy.", - cost: "$20" - }, - { - name: "Catnip", - image: "https://cdn.pixabay.com/photo/2015/07/02/21/55/cat-829681_1280.jpg", - description: "Repels mosquitoes and attracts cats.", - cost: "$13" - } - ] - }, - { - category: "Medicinal Plants", - plants: [ - { - name: "Aloe Vera", - image: "https://cdn.pixabay.com/photo/2018/04/02/07/42/leaf-3283175_1280.jpg", - description: "Soothing gel used for skin ailments.", - cost: "$14" - }, - { - name: "Echinacea", - image: "https://cdn.pixabay.com/photo/2014/12/05/03/53/echinacea-557477_1280.jpg", - description: "Boosts immune system, helps fight colds.", - cost: "$16" - }, - { - name: "Peppermint", - image: "https://cdn.pixabay.com/photo/2017/07/12/12/23/peppermint-2496773_1280.jpg", - description: "Relieves digestive issues and headaches.", - cost: "$13" - }, - { - name: "Lemon Balm", - image: "https://cdn.pixabay.com/photo/2019/09/16/07/41/balm-4480134_1280.jpg", - description: "Calms nerves and promotes relaxation.", - cost: "$14" - }, - { - name: "Chamomile", - image: "https://cdn.pixabay.com/photo/2016/08/19/19/48/flowers-1606041_1280.jpg", - description: "Soothes anxiety and promotes sleep.", - cost: "$15" - }, - { - name: "Calendula", - image: "https://cdn.pixabay.com/photo/2019/07/15/18/28/flowers-4340127_1280.jpg", - description: "Heals wounds and soothes skin irritations.", - cost: "$12" - } - ] - }, - { - category: "Low Maintenance Plants", - plants: [ - { - name: "ZZ Plant", - image: "https://images.unsplash.com/photo-1632207691143-643e2a9a9361?q=80&w=464&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", - description: "Thrives in low light and requires minimal watering.", - cost: "$25" - }, - { - name: "Pothos", - image: "https://cdn.pixabay.com/photo/2018/11/15/10/32/plants-3816945_1280.jpg", - description: "Tolerates neglect and can grow in various conditions.", - cost: "$10" - }, - { - name: "Snake Plant", - image: "https://cdn.pixabay.com/photo/2021/01/22/06/04/snake-plant-5939187_1280.jpg", - description: "Needs infrequent watering and is resilient to most pests.", - cost: "$15" - }, - { - name: "Cast Iron Plant", - image: "https://cdn.pixabay.com/photo/2017/02/16/18/04/cast-iron-plant-2072008_1280.jpg", - description: "Hardy plant that tolerates low light and neglect.", - cost: "$20" - }, - { - name: "Succulents", - image: "https://cdn.pixabay.com/photo/2016/11/21/16/05/cacti-1846147_1280.jpg", - description: "Drought-tolerant plants with unique shapes and colors.", - cost: "$18" - }, - { - name: "Aglaonema", - image: "https://cdn.pixabay.com/photo/2014/10/10/04/27/aglaonema-482915_1280.jpg", - description: "Requires minimal care and adds color to indoor spaces.", - cost: "$22" - } - ] - } - ]; - const styleObj = { - backgroundColor: '#4CAF50', - color: '#fff!important', - padding: '15px', - display: 'flex', - justifyContent: 'space-between', - alignIems: 'center', - fontSize: '20px', - } - const styleObjUl = { - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - width: '1100px', - } - const styleA = { - color: 'white', - fontSize: '30px', - textDecoration: 'none', - } + const cartItems = useSelector((state) => state.cart.items); - const handleHomeClick = (e) => { - e.preventDefault(); - onHomeClick(); - }; + const calculateTotalQuantity = () => { + return cartItems.reduce((total, item) => total + item.quantity, 0); + }; - const handleCartClick = (e) => { - e.preventDefault(); - setShowCart(true); // Set showCart to true when cart icon is clicked - }; - const handlePlantsClick = (e) => { - e.preventDefault(); - setShowPlants(true); // Set showAboutUs to true when "About Us" link is clicked - setShowCart(false); // Hide the cart when navigating to About Us - }; + const handleHomeClick = (e) => { + e.preventDefault(); + onHomeClick(); + }; - const handleContinueShopping = (e) => { - e.preventDefault(); - setShowCart(false); - }; - return ( -
-
-
- + const handleCartClick = (e) => { + e.preventDefault(); + setShowCart(true); + }; -
-
- - -
-
- {!showCart ? ( -
+ const handleContinueShopping = (e) => { + e.preventDefault(); + setShowCart(false); + }; + + const handleAddToCart = (plant) => { + dispatch(addItem(plant)); + setAddedToCart((prev) => ({ ...prev, [plant.name]: true })); + }; + + const plantsArray = [ + { + category: "Air Purifying Plants", + plants: [ + { + name: "Snake Plant", + image: "https://cdn.pixabay.com/photo/2021/01/22/06/04/snake-plant-5939187_1280.jpg", + description: "Produces oxygen at night, improving air quality.", + cost: "$15" + }, + { + name: "Spider Plant", + image: "https://cdn.pixabay.com/photo/2018/07/11/06/47/chlorophytum-3530413_1280.jpg", + description: "Filters formaldehyde and xylene from the air.", + cost: "$12" + }, + { + name: "Peace Lily", + image: "https://cdn.pixabay.com/photo/2019/06/12/14/14/peace-lilies-4269365_1280.jpg", + description: "Removes mold spores and purifies the air.", + cost: "$18" + }, + { + name: "Boston Fern", + image: "https://cdn.pixabay.com/photo/2020/04/30/19/52/boston-fern-5114414_1280.jpg", + description: "Adds humidity to the air and removes toxins.", + cost: "$20" + }, + { + name: "Rubber Plant", + image: "https://cdn.pixabay.com/photo/2020/02/15/11/49/flower-4850729_1280.jpg", + description: "Easy to care for and effective at removing toxins.", + cost: "$17" + }, + { + name: "Aloe Vera", + image: "https://cdn.pixabay.com/photo/2018/04/02/07/42/leaf-3283175_1280.jpg", + description: "Purifies the air and has healing properties for skin.", + cost: "$14" + } + ] + }, + { + category: "Aromatic Fragrant Plants", + plants: [ + { + name: "Lavender", + image: "https://images.unsplash.com/photo-1611909023032-2d6b3134ecba?q=80&w=1074&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + description: "Calming scent, used in aromatherapy.", + cost: "$20" + }, + { + name: "Jasmine", + image: "https://images.unsplash.com/photo-1592729645009-b96d1e63d14b?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + description: "Sweet fragrance, promotes relaxation.", + cost: "$18" + }, + { + name: "Rosemary", + image: "https://cdn.pixabay.com/photo/2019/10/11/07/12/rosemary-4541241_1280.jpg", + description: "Invigorating scent, often used in cooking.", + cost: "$15" + }, + { + name: "Mint", + image: "https://cdn.pixabay.com/photo/2016/01/07/18/16/mint-1126282_1280.jpg", + description: "Refreshing aroma, used in teas and cooking.", + cost: "$12" + }, + { + name: "Lemon Balm", + image: "https://cdn.pixabay.com/photo/2019/09/16/07/41/balm-4480134_1280.jpg", + description: "Citrusy scent, relieves stress and promotes sleep.", + cost: "$14" + }, + { + name: "Hyacinth", + image: "https://cdn.pixabay.com/photo/2019/04/07/20/20/hyacinth-4110726_1280.jpg", + description: "Hyacinth is a beautiful flowering plant known for its fragrant.", + cost: "$22" + } + ] + }, + { + category: "Insect Repellent Plants", + plants: [ + { + name: "oregano", + image: "https://cdn.pixabay.com/photo/2015/05/30/21/20/oregano-790702_1280.jpg", + description: "The oregano plants contains compounds that can deter certain insects.", + cost: "$10" + }, + { + name: "Marigold", + image: "https://cdn.pixabay.com/photo/2022/02/22/05/45/marigold-7028063_1280.jpg", + description: "Natural insect repellent, also adds color to the garden.", + cost: "$8" + }, + { + name: "Geraniums", + image: "https://cdn.pixabay.com/photo/2012/04/26/21/51/flowerpot-43270_1280.jpg", + description: "Known for their insect-repelling properties while adding a pleasant scent.", + cost: "$20" + }, + { + name: "Basil", + image: "https://cdn.pixabay.com/photo/2016/07/24/20/48/tulsi-1539181_1280.jpg", + description: "Repels flies and mosquitoes, also used in cooking.", + cost: "$9" + }, + { + name: "Lavender", + image: "https://images.unsplash.com/photo-1611909023032-2d6b3134ecba?q=80&w=1074&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + description: "Calming scent, used in aromatherapy.", + cost: "$20" + }, + { + name: "Catnip", + image: "https://cdn.pixabay.com/photo/2015/07/02/21/55/cat-829681_1280.jpg", + description: "Repels mosquitoes and attracts cats.", + cost: "$13" + } + ] + }, + { + category: "Medicinal Plants", + plants: [ + { + name: "Aloe Vera", + image: "https://cdn.pixabay.com/photo/2018/04/02/07/42/leaf-3283175_1280.jpg", + description: "Soothing gel used for skin ailments.", + cost: "$14" + }, + { + name: "Echinacea", + image: "https://cdn.pixabay.com/photo/2014/12/05/03/53/echinacea-557477_1280.jpg", + description: "Boosts immune system, helps fight colds.", + cost: "$16" + }, + { + name: "Peppermint", + image: "https://cdn.pixabay.com/photo/2017/07/12/12/23/peppermint-2496773_1280.jpg", + description: "Relieves digestive issues and headaches.", + cost: "$13" + }, + { + name: "Lemon Balm", + image: "https://cdn.pixabay.com/photo/2019/09/16/07/41/balm-4480134_1280.jpg", + description: "Calms nerves and promotes relaxation.", + cost: "$14" + }, + { + name: "Chamomile", + image: "https://cdn.pixabay.com/photo/2016/08/19/19/48/flowers-1606041_1280.jpg", + description: "Soothes anxiety and promotes sleep.", + cost: "$15" + }, + { + name: "Calendula", + image: "https://cdn.pixabay.com/photo/2019/07/15/18/28/flowers-4340127_1280.jpg", + description: "Heals wounds and soothes skin irritations.", + cost: "$12" + } + ] + }, + { + category: "Low Maintenance Plants", + plants: [ + { + name: "ZZ Plant", + image: "https://images.unsplash.com/photo-1632207691143-643e2a9a9361?q=80&w=464&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + description: "Thrives in low light and requires minimal watering.", + cost: "$25" + }, + { + name: "Pothos", + image: "https://cdn.pixabay.com/photo/2018/11/15/10/32/plants-3816945_1280.jpg", + description: "Tolerates neglect and can grow in various conditions.", + cost: "$10" + }, + { + name: "Snake Plant", + image: "https://cdn.pixabay.com/photo/2021/01/22/06/04/snake-plant-5939187_1280.jpg", + description: "Needs infrequent watering and is resilient to most pests.", + cost: "$15" + }, + { + name: "Cast Iron Plant", + image: "https://cdn.pixabay.com/photo/2017/02/16/18/04/cast-iron-plant-2072008_1280.jpg", + description: "Hardy plant that tolerates low light and neglect.", + cost: "$20" + }, + { + name: "Succulents", + image: "https://cdn.pixabay.com/photo/2016/11/21/16/05/cacti-1846147_1280.jpg", + description: "Drought-tolerant plants with unique shapes and colors.", + cost: "$18" + }, + { + name: "Aglaonema", + image: "https://cdn.pixabay.com/photo/2014/10/10/04/27/aglaonema-482915_1280.jpg", + description: "Requires minimal care and adds color to indoor spaces.", + cost: "$22" + } + ] + } + ] + + const styleObj = { + backgroundColor: '#4CAF50', + color: '#fff', + padding: '15px', + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + fontSize: '20px', + }; + const styleObjUl = { + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + width: '1100px', + }; -
- ) : ( - - )} + const styleA = { + color: 'white', + fontSize: '30px', + textDecoration: 'none', + }; + + return ( +
+ + + {!showCart ? ( +
+ {plantsArray.map((category, index) => ( +
+

{category.category}

+
+ {category.plants.map((plant, idx) => ( +
+ {plant.name} +

{plant.name}

+

{plant.description}

+

{plant.cost}

+ +
+ ))} +
+
+ ))}
- ); + ) : ( + + )} +
+ ); } -export default ProductList; +export default ProductList; \ No newline at end of file diff --git a/vite.config.js b/vite.config.js index 4d190ae430..beeaed5cdc 100644 --- a/vite.config.js +++ b/vite.config.js @@ -3,6 +3,6 @@ import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ - base: "/shoppingreact", + base: "/e-plantShopping", plugins: [react()], }) From a88b41109e1c17d668eb5021b5eae89b7588c46f Mon Sep 17 00:00:00 2001 From: ojhadipankar854-design Date: Sat, 13 Sep 2025 10:26:56 +0530 Subject: [PATCH 2/8] Update AboutUs.jsx --- src/AboutUs.jsx | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/src/AboutUs.jsx b/src/AboutUs.jsx index 2341581c57..bab9815e3d 100644 --- a/src/AboutUs.jsx +++ b/src/AboutUs.jsx @@ -5,25 +5,18 @@ function AboutUs() { return (
{/*

About Us

*/} -

Welcome to Paradise Nursery, where green meets serenity!

+

Welcome to The Green Nook, Rooted in Nature, Grown with Love.

- At Paradise Nursery, we are passionate about bringing nature closer to you. Our mission is to provide a wide range of - high-quality plants that not only enhance the beauty of your surroundings but also contribute to a healthier and - more sustainable lifestyle. From air-purifying plants to aromatic fragrant ones, we have something for every - plant enthusiast. + Welcome to The Green Nook β€” your cozy, plant-filled escape from the hustle and bustle of everyday life. Whether you're a seasoned plant parent or just beginning your journey into greenery, our shop is here to help you grow a thriving, joyful space. From lush tropical foliage to hardy succulents and air-purifying houseplants, we curate every plant with care, ensuring it arrives healthy and ready to brighten your home.

{/*

*/}

- Our team of experts is dedicated to ensuring that each plant meets our strict standards of quality and care. - Whether you're a seasoned gardener or just starting your green journey, we're here to support you every step of - the way. Feel free to explore our collection, ask questions, and let us help you find the perfect plant for your - home or office. + At The Green Nook, we believe that plants do more than decorate β€” they uplift, inspire, and connect us to the calming rhythms of nature. That’s why we offer not only beautiful plants but also expert advice, custom potting services, and thoughtful plant care products to support you every step of the way. Our friendly team is passionate about helping you find the perfect plant for your space, lifestyle, and experience level.

{/*

*/}

- Join us in our mission to create a greener, healthier world. Visit Paradise Nursery today and experience the - beauty of nature right at your doorstep. + Whether you're looking to transform a room, find a meaningful gift, or simply add a touch of green to your day, we’re so glad you’re here. Step into The Green Nook β€” where your indoor jungle begins and every leaf tells a story.

); From ae25c12f400e8ec439e8e9d43f216b3b58826cab Mon Sep 17 00:00:00 2001 From: ojhadipankar854-design Date: Sat, 13 Sep 2025 10:28:10 +0530 Subject: [PATCH 3/8] Update App.jsx --- src/App.jsx | 77 ++++++++++++++++++++++++----------------------------- 1 file changed, 35 insertions(+), 42 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 57be8b808c..8c3e3944e1 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,54 +1,47 @@ + import React, { useState } from 'react'; import ProductList from './ProductList'; -import CartItem from './CartItem'; +import './App.css'; +import AboutUs from './AboutUs'; + -const App = () => { - const [showCart, setShowCart] = useState(false); // View toggle +function App() { + + const [showProductList, setShowProductList] = useState(false); - const handleViewCart = () => { - setShowCart(true); + const handleGetStartedClick = () => { + setShowProductList(true); }; - const handleContinueShopping = () => { - setShowCart(false); + const handleHomeClick = () => { + setShowProductList(false); }; return ( -
-
-

🌿 Plant Shop

- -
- -
- {showCart ? ( - - ) : ( - - )} -
+
+
+
+
+
+

Welcome To The Green Nook

+
+

Rooted in Nature, Grown with Love.

+ + +
+
+ +
+
+ +
+
+ +
); -}; +} -export default App; \ No newline at end of file +export default App; From 8f5aba7b79f0fc85332e2f8fda50a378562b945e Mon Sep 17 00:00:00 2001 From: ojhadipankar854-design Date: Sat, 13 Sep 2025 10:29:51 +0530 Subject: [PATCH 4/8] Update CartItem.jsx --- src/CartItem.jsx | 47 +++++++++++++++++++++++++---------------------- 1 file changed, 25 insertions(+), 22 deletions(-) diff --git a/src/CartItem.jsx b/src/CartItem.jsx index 1a7985a9ea..01b25b7973 100644 --- a/src/CartItem.jsx +++ b/src/CartItem.jsx @@ -1,3 +1,4 @@ + import React from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { removeItem, updateQuantity } from './CartSlice'; @@ -10,36 +11,37 @@ const CartItem = ({ onContinueShopping }) => { // Calculate total amount for all products in the cart const calculateTotalAmount = () => { let total = 0; - - cart.forEach((item) => { - // Convert cost string like "$15" to number: 15 - const costNumber = parseFloat(item.cost.substring(1)); - - // Multiply cost by quantity and add to total - total += costNumber * item.quantity; + cart.forEach(item => { + const costNumber = parseFloat(item.cost.substring(1)); // remove $ and convert to number + total += costNumber * item.quantity; }); - - return total; + return total.toFixed(2); }; - const handleContinueShopping = (e) => { - e.preventDefault(); - onContinueShopping(e); - + const handleCheckoutShopping = (e) => { + alert('Functionality to be added for future reference'); }; - - const handleIncrement = (item) => { - dispatch(updateQuantity({ name: item.name, quantity: item.quantity + 1 })); + const currentItem = cart.find(cartItem => cartItem.name === item.name); + if (!currentItem) return; + dispatch(updateQuantity({ + name: item.name, + quantity: currentItem.quantity + 1 + })); }; const handleDecrement = (item) => { - if (item.quantity > 1) { - dispatch(updateQuantity({ name: item.name, quantity: item.quantity - 1 })); + const currentItem = cart.find(cartItem => cartItem.name === item.name); + if (!currentItem) return; + if (currentItem.quantity > 1) { + dispatch(updateQuantity({ + name: item.name, + quantity: currentItem.quantity - 1 + })); } else { - dispatch(removeItem(item.name)); // Remove the item if quantity becomes 0 + dispatch(removeItem(item.name)); } }; @@ -49,8 +51,9 @@ const CartItem = ({ onContinueShopping }) => { // Calculate total cost based on quantity for an item const calculateTotalCost = (item) => { - const unitPrice = parseFloat(item.cost.substring(1)); // Convert "$15" β†’ 15 - return unitPrice * item.quantity; + // Extract numeric value from cost string and multiply by quantity + const price = parseFloat(item.cost.substring(1)); // e.g., "$15" β†’ 15 + return (price * item.quantity).toFixed(2); // Keep two decimal places }; return ( @@ -84,4 +87,4 @@ const CartItem = ({ onContinueShopping }) => { ); }; -export default CartItem; \ No newline at end of file +export default CartItem; From 3290b2ab01c92fa8100ec48f6d1f8024aee897e3 Mon Sep 17 00:00:00 2001 From: ojhadipankar854-design Date: Sat, 13 Sep 2025 10:30:22 +0530 Subject: [PATCH 5/8] Update CartSlice.jsx --- src/CartSlice.jsx | 37 +++++++++++++++++++++++++++---------- 1 file changed, 27 insertions(+), 10 deletions(-) diff --git a/src/CartSlice.jsx b/src/CartSlice.jsx index cd2be8ba65..538a86a208 100644 --- a/src/CartSlice.jsx +++ b/src/CartSlice.jsx @@ -1,30 +1,47 @@ + import { createSlice } from '@reduxjs/toolkit'; export const CartSlice = createSlice({ name: 'cart', initialState: { - items: [], + items: [], // Initialize items as an empty array }, reducers: { addItem: (state, action) => { - const item = action.payload; - const existingItem = state.items.find(i => i.name === item.name); - if (!existingItem) { - state.items.push({ ...item, quantity: 1 }); // Add new item with quantity 1 + const { name, image, cost } = action.payload; + const existingItem = state.items.find(item => item.name === name); + if (existingItem) { + existingItem.quantity++; + } else { + state.items.push({ name, image, cost, quantity: 1 }); } }, removeItem: (state, action) => { state.items = state.items.filter(item => item.name !== action.payload); }, + incrementQuantity: (state, action) => { + const item = state.items.find(i => i.name === action.payload); + if (item) { + item.quantity += 1; + } + }, + decrementQuantity: (state, action) => { + const item = state.items.find(i => i.name === action.payload); + if (item) { + if (item.quantity > 1) { + item.quantity -= 1; + } else { + state.items = state.items.filter(i => i.name !== action.payload); + } + } + }, updateQuantity: (state, action) => { const { name, quantity } = action.payload; const item = state.items.find(i => i.name === name); - if (item) { - item.quantity = quantity; - } + if (item) item.quantity = quantity; }, }, }); -export const { addItem, removeItem, updateQuantity } = CartSlice.actions; -export default CartSlice.reducer; \ No newline at end of file +export const { addItem, removeItem, incrementQuantity, decrementQuantity, updateQuantity } = CartSlice.actions; +export default CartSlice.reducer; From e10e79ef02e4c6e93bfdf61503fc92dee6ba5966 Mon Sep 17 00:00:00 2001 From: ojhadipankar854-design Date: Sat, 13 Sep 2025 10:31:05 +0530 Subject: [PATCH 6/8] Update ProductList.css --- src/ProductList.css | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/src/ProductList.css b/src/ProductList.css index 52f9c7a84f..8e63a3399a 100644 --- a/src/ProductList.css +++ b/src/ProductList.css @@ -178,16 +178,18 @@ body { justify-content: center; /* background-color: yellow; */ } -.plant_heading{ - width: 400px; - text-align: center; - margin: 20px; - border: 1px solid rgb(5, 4, 4); +.plant_heading { + width: 100%; /* Make it span the full container */ + max-width: 400px; /* Optional: limit maximum width */ + text-align: center; /* Center text inside the heading */ + margin: 20px auto; /* Center the block horizontally */ + border-top: 1px solid rgb(5, 4, 4); + border-bottom: 1px solid rgb(5, 4, 4); border-left: none; border-right: none; - - + padding: 10px 0; /* Optional: add vertical padding */ } + /* Add Media Query for responsiveness */ @media (max-width: 768px) { .product-card { @@ -217,6 +219,7 @@ body { .product-button.added-to-cart { background-color: grey; /* Grey when product is added */ + cursor: not-allowed; } @media (max-width: 1200px) { .product-card { @@ -249,4 +252,4 @@ body { .ul div { text-align: center; /* Align text to the center */ } - } \ No newline at end of file + } From fea63d15b573a05ccc9e6730d2c3f057b81ff7ca Mon Sep 17 00:00:00 2001 From: ojhadipankar854-design Date: Sat, 13 Sep 2025 10:31:43 +0530 Subject: [PATCH 7/8] Update ProductList.jsx --- src/ProductList.jsx | 634 ++++++++++++++++++++++---------------------- 1 file changed, 321 insertions(+), 313 deletions(-) diff --git a/src/ProductList.jsx b/src/ProductList.jsx index 01b1814c05..afa391ac83 100644 --- a/src/ProductList.jsx +++ b/src/ProductList.jsx @@ -1,327 +1,335 @@ -import React, { useState } from 'react'; -import './ProductList.css'; +import React, { useState, useEffect } from 'react'; +import { useDispatch, useSelector } from "react-redux"; +import './ProductList.css' import CartItem from './CartItem'; -import { useDispatch, useSelector } from 'react-redux'; -import { addItem } from './CartSlice'; +import { addItem, incrementQuantity, decrementQuantity } from './CartSlice'; function ProductList({ onHomeClick }) { - const [showCart, setShowCart] = useState(false); - const [addedToCart, setAddedToCart] = useState({}); - const dispatch = useDispatch(); + const dispatch = useDispatch(); + const cartItems = useSelector((state) => state.cart.items); + const [showCart, setShowCart] = useState(false); + const [showPlants, setShowPlants] = useState(false); // State to control the visibility of the About Us page + const [addedToCart, setAddedToCart] = useState({}); // Track products added to cart - const cartItems = useSelector((state) => state.cart.items); - - const calculateTotalQuantity = () => { - return cartItems.reduce((total, item) => total + item.quantity, 0); - }; - - const handleHomeClick = (e) => { - e.preventDefault(); - onHomeClick(); - }; - - const handleCartClick = (e) => { - e.preventDefault(); - setShowCart(true); - }; - - const handleContinueShopping = (e) => { - e.preventDefault(); - setShowCart(false); - }; - - const handleAddToCart = (plant) => { - dispatch(addItem(plant)); - setAddedToCart((prev) => ({ ...prev, [plant.name]: true })); - }; - - const plantsArray = [ - { - category: "Air Purifying Plants", - plants: [ - { - name: "Snake Plant", - image: "https://cdn.pixabay.com/photo/2021/01/22/06/04/snake-plant-5939187_1280.jpg", - description: "Produces oxygen at night, improving air quality.", - cost: "$15" - }, - { - name: "Spider Plant", - image: "https://cdn.pixabay.com/photo/2018/07/11/06/47/chlorophytum-3530413_1280.jpg", - description: "Filters formaldehyde and xylene from the air.", - cost: "$12" - }, - { - name: "Peace Lily", - image: "https://cdn.pixabay.com/photo/2019/06/12/14/14/peace-lilies-4269365_1280.jpg", - description: "Removes mold spores and purifies the air.", - cost: "$18" - }, - { - name: "Boston Fern", - image: "https://cdn.pixabay.com/photo/2020/04/30/19/52/boston-fern-5114414_1280.jpg", - description: "Adds humidity to the air and removes toxins.", - cost: "$20" - }, - { - name: "Rubber Plant", - image: "https://cdn.pixabay.com/photo/2020/02/15/11/49/flower-4850729_1280.jpg", - description: "Easy to care for and effective at removing toxins.", - cost: "$17" - }, - { - name: "Aloe Vera", - image: "https://cdn.pixabay.com/photo/2018/04/02/07/42/leaf-3283175_1280.jpg", - description: "Purifies the air and has healing properties for skin.", - cost: "$14" - } - ] - }, - { - category: "Aromatic Fragrant Plants", - plants: [ - { - name: "Lavender", - image: "https://images.unsplash.com/photo-1611909023032-2d6b3134ecba?q=80&w=1074&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", - description: "Calming scent, used in aromatherapy.", - cost: "$20" - }, - { - name: "Jasmine", - image: "https://images.unsplash.com/photo-1592729645009-b96d1e63d14b?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", - description: "Sweet fragrance, promotes relaxation.", - cost: "$18" - }, - { - name: "Rosemary", - image: "https://cdn.pixabay.com/photo/2019/10/11/07/12/rosemary-4541241_1280.jpg", - description: "Invigorating scent, often used in cooking.", - cost: "$15" - }, - { - name: "Mint", - image: "https://cdn.pixabay.com/photo/2016/01/07/18/16/mint-1126282_1280.jpg", - description: "Refreshing aroma, used in teas and cooking.", - cost: "$12" - }, - { - name: "Lemon Balm", - image: "https://cdn.pixabay.com/photo/2019/09/16/07/41/balm-4480134_1280.jpg", - description: "Citrusy scent, relieves stress and promotes sleep.", - cost: "$14" - }, - { - name: "Hyacinth", - image: "https://cdn.pixabay.com/photo/2019/04/07/20/20/hyacinth-4110726_1280.jpg", - description: "Hyacinth is a beautiful flowering plant known for its fragrant.", - cost: "$22" - } - ] - }, - { - category: "Insect Repellent Plants", - plants: [ - { - name: "oregano", - image: "https://cdn.pixabay.com/photo/2015/05/30/21/20/oregano-790702_1280.jpg", - description: "The oregano plants contains compounds that can deter certain insects.", - cost: "$10" - }, - { - name: "Marigold", - image: "https://cdn.pixabay.com/photo/2022/02/22/05/45/marigold-7028063_1280.jpg", - description: "Natural insect repellent, also adds color to the garden.", - cost: "$8" - }, - { - name: "Geraniums", - image: "https://cdn.pixabay.com/photo/2012/04/26/21/51/flowerpot-43270_1280.jpg", - description: "Known for their insect-repelling properties while adding a pleasant scent.", - cost: "$20" - }, - { - name: "Basil", - image: "https://cdn.pixabay.com/photo/2016/07/24/20/48/tulsi-1539181_1280.jpg", - description: "Repels flies and mosquitoes, also used in cooking.", - cost: "$9" - }, - { - name: "Lavender", - image: "https://images.unsplash.com/photo-1611909023032-2d6b3134ecba?q=80&w=1074&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", - description: "Calming scent, used in aromatherapy.", - cost: "$20" - }, - { - name: "Catnip", - image: "https://cdn.pixabay.com/photo/2015/07/02/21/55/cat-829681_1280.jpg", - description: "Repels mosquitoes and attracts cats.", - cost: "$13" - } - ] - }, - { - category: "Medicinal Plants", - plants: [ - { - name: "Aloe Vera", - image: "https://cdn.pixabay.com/photo/2018/04/02/07/42/leaf-3283175_1280.jpg", - description: "Soothing gel used for skin ailments.", - cost: "$14" - }, - { - name: "Echinacea", - image: "https://cdn.pixabay.com/photo/2014/12/05/03/53/echinacea-557477_1280.jpg", - description: "Boosts immune system, helps fight colds.", - cost: "$16" - }, - { - name: "Peppermint", - image: "https://cdn.pixabay.com/photo/2017/07/12/12/23/peppermint-2496773_1280.jpg", - description: "Relieves digestive issues and headaches.", - cost: "$13" - }, - { - name: "Lemon Balm", - image: "https://cdn.pixabay.com/photo/2019/09/16/07/41/balm-4480134_1280.jpg", - description: "Calms nerves and promotes relaxation.", - cost: "$14" - }, - { - name: "Chamomile", - image: "https://cdn.pixabay.com/photo/2016/08/19/19/48/flowers-1606041_1280.jpg", - description: "Soothes anxiety and promotes sleep.", - cost: "$15" - }, - { - name: "Calendula", - image: "https://cdn.pixabay.com/photo/2019/07/15/18/28/flowers-4340127_1280.jpg", - description: "Heals wounds and soothes skin irritations.", - cost: "$12" - } - ] - }, - { - category: "Low Maintenance Plants", - plants: [ - { - name: "ZZ Plant", - image: "https://images.unsplash.com/photo-1632207691143-643e2a9a9361?q=80&w=464&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", - description: "Thrives in low light and requires minimal watering.", - cost: "$25" - }, - { - name: "Pothos", - image: "https://cdn.pixabay.com/photo/2018/11/15/10/32/plants-3816945_1280.jpg", - description: "Tolerates neglect and can grow in various conditions.", - cost: "$10" - }, - { - name: "Snake Plant", - image: "https://cdn.pixabay.com/photo/2021/01/22/06/04/snake-plant-5939187_1280.jpg", - description: "Needs infrequent watering and is resilient to most pests.", - cost: "$15" - }, - { - name: "Cast Iron Plant", - image: "https://cdn.pixabay.com/photo/2017/02/16/18/04/cast-iron-plant-2072008_1280.jpg", - description: "Hardy plant that tolerates low light and neglect.", - cost: "$20" - }, - { - name: "Succulents", - image: "https://cdn.pixabay.com/photo/2016/11/21/16/05/cacti-1846147_1280.jpg", - description: "Drought-tolerant plants with unique shapes and colors.", - cost: "$18" - }, - { - name: "Aglaonema", - image: "https://cdn.pixabay.com/photo/2014/10/10/04/27/aglaonema-482915_1280.jpg", - description: "Requires minimal care and adds color to indoor spaces.", - cost: "$22" - } - ] + const plantsArray = [ + { + category: "Air Purifying Plants", + plants: [ + { + name: "Snake Plant", + image: "https://cdn.pixabay.com/photo/2021/01/22/06/04/snake-plant-5939187_1280.jpg", + description: "Produces oxygen at night, improving air quality.", + cost: "$15" + }, + { + name: "Spider Plant", + image: "https://cdn.pixabay.com/photo/2018/07/11/06/47/chlorophytum-3530413_1280.jpg", + description: "Filters formaldehyde and xylene from the air.", + cost: "$12" + }, + { + name: "Peace Lily", + image: "https://cdn.pixabay.com/photo/2019/06/12/14/14/peace-lilies-4269365_1280.jpg", + description: "Removes mold spores and purifies the air.", + cost: "$18" + }, + { + name: "Boston Fern", + image: "https://cdn.pixabay.com/photo/2020/04/30/19/52/boston-fern-5114414_1280.jpg", + description: "Adds humidity to the air and removes toxins.", + cost: "$20" + }, + { + name: "Rubber Plant", + image: "https://cdn.pixabay.com/photo/2020/02/15/11/49/flower-4850729_1280.jpg", + description: "Easy to care for and effective at removing toxins.", + cost: "$17" + }, + { + name: "Aloe Vera", + image: "https://cdn.pixabay.com/photo/2018/04/02/07/42/leaf-3283175_1280.jpg", + description: "Purifies the air and has healing properties for skin.", + cost: "$14" + } + ] + }, + { + category: "Aromatic Fragrant Plants", + plants: [ + { + name: "Lavender", + image: "https://images.unsplash.com/photo-1611909023032-2d6b3134ecba?q=80&w=1074&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + description: "Calming scent, used in aromatherapy.", + cost: "$20" + }, + { + name: "Jasmine", + image: "https://images.unsplash.com/photo-1592729645009-b96d1e63d14b?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + description: "Sweet fragrance, promotes relaxation.", + cost: "$18" + }, + { + name: "Rosemary", + image: "https://cdn.pixabay.com/photo/2019/10/11/07/12/rosemary-4541241_1280.jpg", + description: "Invigorating scent, often used in cooking.", + cost: "$15" + }, + { + name: "Mint", + image: "https://cdn.pixabay.com/photo/2016/01/07/18/16/mint-1126282_1280.jpg", + description: "Refreshing aroma, used in teas and cooking.", + cost: "$12" + }, + { + name: "Lemon Balm", + image: "https://cdn.pixabay.com/photo/2019/09/16/07/41/balm-4480134_1280.jpg", + description: "Citrusy scent, relieves stress and promotes sleep.", + cost: "$14" + }, + { + name: "Hyacinth", + image: "https://cdn.pixabay.com/photo/2019/04/07/20/20/hyacinth-4110726_1280.jpg", + description: "Hyacinth is a beautiful flowering plant known for its fragrant.", + cost: "$22" + } + ] + }, + { + category: "Insect Repellent Plants", + plants: [ + { + name: "oregano", + image: "https://cdn.pixabay.com/photo/2015/05/30/21/20/oregano-790702_1280.jpg", + description: "The oregano plants contains compounds that can deter certain insects.", + cost: "$10" + }, + { + name: "Marigold", + image: "https://cdn.pixabay.com/photo/2022/02/22/05/45/marigold-7028063_1280.jpg", + description: "Natural insect repellent, also adds color to the garden.", + cost: "$8" + }, + { + name: "Geraniums", + image: "https://cdn.pixabay.com/photo/2012/04/26/21/51/flowerpot-43270_1280.jpg", + description: "Known for their insect-repelling properties while adding a pleasant scent.", + cost: "$20" + }, + { + name: "Basil", + image: "https://cdn.pixabay.com/photo/2016/07/24/20/48/tulsi-1539181_1280.jpg", + description: "Repels flies and mosquitoes, also used in cooking.", + cost: "$9" + }, + { + name: "Lavender", + image: "https://images.unsplash.com/photo-1611909023032-2d6b3134ecba?q=80&w=1074&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + description: "Calming scent, used in aromatherapy.", + cost: "$20" + }, + { + name: "Catnip", + image: "https://cdn.pixabay.com/photo/2015/07/02/21/55/cat-829681_1280.jpg", + description: "Repels mosquitoes and attracts cats.", + cost: "$13" + } + ] + }, + { + category: "Medicinal Plants", + plants: [ + { + name: "Aloe Vera", + image: "https://cdn.pixabay.com/photo/2018/04/02/07/42/leaf-3283175_1280.jpg", + description: "Soothing gel used for skin ailments.", + cost: "$14" + }, + { + name: "Echinacea", + image: "https://cdn.pixabay.com/photo/2014/12/05/03/53/echinacea-557477_1280.jpg", + description: "Boosts immune system, helps fight colds.", + cost: "$16" + }, + { + name: "Peppermint", + image: "https://cdn.pixabay.com/photo/2017/07/12/12/23/peppermint-2496773_1280.jpg", + description: "Relieves digestive issues and headaches.", + cost: "$13" + }, + { + name: "Lemon Balm", + image: "https://cdn.pixabay.com/photo/2019/09/16/07/41/balm-4480134_1280.jpg", + description: "Calms nerves and promotes relaxation.", + cost: "$14" + }, + { + name: "Chamomile", + image: "https://cdn.pixabay.com/photo/2016/08/19/19/48/flowers-1606041_1280.jpg", + description: "Soothes anxiety and promotes sleep.", + cost: "$15" + }, + { + name: "Calendula", + image: "https://cdn.pixabay.com/photo/2019/07/15/18/28/flowers-4340127_1280.jpg", + description: "Heals wounds and soothes skin irritations.", + cost: "$12" + } + ] + }, + { + category: "Low Maintenance Plants", + plants: [ + { + name: "ZZ Plant", + image: "https://images.unsplash.com/photo-1632207691143-643e2a9a9361?q=80&w=464&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + description: "Thrives in low light and requires minimal watering.", + cost: "$25" + }, + { + name: "Pothos", + image: "https://cdn.pixabay.com/photo/2018/11/15/10/32/plants-3816945_1280.jpg", + description: "Tolerates neglect and can grow in various conditions.", + cost: "$10" + }, + { + name: "Snake Plant", + image: "https://cdn.pixabay.com/photo/2021/01/22/06/04/snake-plant-5939187_1280.jpg", + description: "Needs infrequent watering and is resilient to most pests.", + cost: "$15" + }, + { + name: "Cast Iron Plant", + image: "https://cdn.pixabay.com/photo/2017/02/16/18/04/cast-iron-plant-2072008_1280.jpg", + description: "Hardy plant that tolerates low light and neglect.", + cost: "$20" + }, + { + name: "Succulents", + image: "https://cdn.pixabay.com/photo/2016/11/21/16/05/cacti-1846147_1280.jpg", + description: "Drought-tolerant plants with unique shapes and colors.", + cost: "$18" + }, + { + name: "Aglaonema", + image: "https://cdn.pixabay.com/photo/2014/10/10/04/27/aglaonema-482915_1280.jpg", + description: "Requires minimal care and adds color to indoor spaces.", + cost: "$22" + } + ] + } + ]; + const styleObj = { + backgroundColor: '#4CAF50', + color: '#fff!important', + padding: '15px', + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + fontSize: '20px', + } + const styleObjUl = { + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + width: '1100px', + } + const styleA = { + color: 'white', + fontSize: '30px', + textDecoration: 'none', } - ] - const styleObj = { - backgroundColor: '#4CAF50', - color: '#fff', - padding: '15px', - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - fontSize: '20px', - }; + const handleHomeClick = (e) => { + e.preventDefault(); + onHomeClick(); + }; - const styleObjUl = { - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - width: '1100px', - }; - const styleA = { - color: 'white', - fontSize: '30px', - textDecoration: 'none', - }; + const handleAddToCart = (product) => { + dispatch(addItem(product)); // Dispatch the action to add the product to the cart (Redux action) + + setAddedToCart((prevState) => ({ // Update the local state to reflect that the product has been added + ...prevState, // Spread the previous state to retain existing entries + [product.name]: true, // Set the current product's name as a key with value 'true' to mark it as added + })); + }; + + // Calculate total quantity in the cart + const totalCartItems = cartItems.reduce((total, item) => total + item.quantity, 0); - return ( -
- + const handleCartClick = (e) => { + e.preventDefault(); + setShowCart(true); // Set showCart to true when cart icon is clicked + }; + const handlePlantsClick = (e) => { + e.preventDefault(); + setShowPlants(true); // Set showAboutUs to true when "About Us" link is clicked + setShowCart(false); // Hide the cart when navigating to About Us + }; + + const handleContinueShopping = (e) => { + e.preventDefault(); + setShowCart(false); + }; + return ( +
+
+
+ - {!showCart ? ( -
- {plantsArray.map((category, index) => ( -
-

{category.category}

-
- {category.plants.map((plant, idx) => ( -
- {plant.name} -

{plant.name}

-

{plant.description}

-

{plant.cost}

- -
- ))} -
+
+
- ))} + {!showCart ? ( +
+ {plantsArray.map((category, index) => ( // Loop through each category in plantsArray +
{/* Unique key for each category div */} +

{category.category}

+
{/* Container for the list of plant cards */} + {category.plants.map((plant, plantIndex) => ( // Loop through each plant in the current category +
{/* Unique key for each plant card */} + {plant.name} +
{plant.name}
{/* Display plant name */} + {/* Display other plant details like description and cost */} +
{plant.description}
{/* Display plant description */} +
{plant.cost}
{/* Display plant cost */} + +
+ ))} +
+
+ ))} +
+ ) : ( + + )}
- ) : ( - - )} -
- ); + ); } -export default ProductList; \ No newline at end of file +export default ProductList; From 020c8e451113fc5f5ede7e5d7a6688ef76d92a30 Mon Sep 17 00:00:00 2001 From: ojhadipankar854-design Date: Sat, 13 Sep 2025 15:25:55 +0530 Subject: [PATCH 8/8] Update ProductList.jsx --- src/ProductList.jsx | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/src/ProductList.jsx b/src/ProductList.jsx index afa391ac83..a653d464ce 100644 --- a/src/ProductList.jsx +++ b/src/ProductList.jsx @@ -4,6 +4,7 @@ import './ProductList.css' import CartItem from './CartItem'; import { addItem, incrementQuantity, decrementQuantity } from './CartSlice'; + function ProductList({ onHomeClick }) { const dispatch = useDispatch(); const cartItems = useSelector((state) => state.cart.items); @@ -237,14 +238,31 @@ function ProductList({ onHomeClick }) { color: 'white', fontSize: '30px', textDecoration: 'none', + + + + + } + const handleHomeClick = (e) => { e.preventDefault(); onHomeClick(); }; + + + + + + + + + + + const handleAddToCart = (product) => { dispatch(addItem(product)); // Dispatch the action to add the product to the cart (Redux action) @@ -294,6 +312,19 @@ function ProductList({ onHomeClick }) { )}
+ + + + + + + + + + + + +
{!showCart ? (
@@ -330,6 +361,10 @@ function ProductList({ onHomeClick }) { )}
); + + + + } export default ProductList;