diff --git a/package-lock.json b/package-lock.json index 7851e56..0fff1f1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -43,6 +43,7 @@ "react-redux": "^9.1.2", "react-router-dom": "^6.26.2", "react-scripts": "^5.0.1", + "react-toastify": "^11.0.2", "rimraf": "^6.0.1", "scrolltrigger": "^1.0.1", "styled-components": "^6.1.13", @@ -15873,6 +15874,19 @@ "node": ">=10" } }, + "node_modules/react-toastify": { + "version": "11.0.2", + "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.0.2.tgz", + "integrity": "sha512-GjHuGaiXMvbls3ywqv8XdWONwrcO4DXCJIY1zVLkHU73gEElKvTTXNI5Vom3s/k/M8hnkrfsqgBSX3OwmlonbA==", + "license": "MIT", + "dependencies": { + "clsx": "^2.1.1" + }, + "peerDependencies": { + "react": "^18 || ^19", + "react-dom": "^18 || ^19" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index a922e7b..dfcee85 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "react-redux": "^9.1.2", "react-router-dom": "^6.26.2", "react-scripts": "^5.0.1", + "react-toastify": "^11.0.2", "rimraf": "^6.0.1", "scrolltrigger": "^1.0.1", "styled-components": "^6.1.13", diff --git a/src/App.js b/src/App.js index d79df45..8b45bc0 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,6 @@ - import React from 'react'; +import { ToastContainer } from 'react-toastify'; +import 'react-toastify/dist/ReactToastify.css'; import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; import ScrollToTop from './componets/ScrollToTop'; import { Provider } from 'react-redux'; @@ -46,6 +47,8 @@ function App() { + + } /> @@ -79,3 +82,4 @@ function App() { } export default App; + diff --git a/src/Pages/Shop.js b/src/Pages/Shop.js index 1950178..5d1d959 100644 --- a/src/Pages/Shop.js +++ b/src/Pages/Shop.js @@ -1,3 +1,4 @@ +import React from 'react'; import { useDispatch } from 'react-redux'; // import React, { useState } from 'react'; // import { addToCart, removeFromCart } from '../Store/cartSlice'; @@ -6,14 +7,21 @@ import { motion } from 'framer-motion'; import { addToCart } from '../Store/cartSlice'; import { useState } from 'react'; import Button from '../componets/Button'; +import { toast, ToastContainer } from 'react-toastify'; // Add this import +import 'react-toastify/dist/ReactToastify.css'; + import ButtonGroup from '@mui/material/ButtonGroup'; + const ShopContainer = styled.div` - padding: 6rem 2rem 4rem 2rem; // Added top padding for navbar + padding: 6rem 2rem 4rem 2rem; max-width: 1200px; margin: 0 auto; + background-color: #fffbeb; + padding-top: 1.5rem; padding-top: 1.5rem; /* Adjusted padding for top */ + `; const Title = styled(motion.h1)` @@ -22,7 +30,7 @@ const Title = styled(motion.h1)` margin-top: 2rem; padding: 1rem; text-align: center; - color: #78350f; // Warm brown color + color: #78350f; `; @@ -30,10 +38,11 @@ const ProductGrid = styled.div` display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; - max-width: 1100px; // Slightly reduced to center content more + max-width: 1100px; margin: 0 auto; margin-top : 50px; `; + const ProductCard = styled(motion.div)` background: linear-gradient(145deg, #ffffff, #e6e6e6); border-radius: 10px; @@ -46,7 +55,6 @@ const ProductCard = styled(motion.div)` transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; - &:hover { transform: translateY(-5px); box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.15), -4px -4px 12px rgba(255, 255, 255, 0.9); @@ -55,18 +63,6 @@ const ProductCard = styled(motion.div)` &:hover .overlay { opacity: 1; } - - &:hover .overlay { - opacity: 1; -} - -transition: box-shadow 0.3s ease; - -&:hover { - box-shadow: 0 8px 12px rgba(0,0,0,0.15); -} - - `; const ProductImage = styled(motion.img)` @@ -110,7 +106,6 @@ const OverlayText = styled.p` text-align: center; `; - const ProductInfo = styled.div` padding: 1.25rem; background : url("https://png.pngtree.com/thumb_back/fh260/background/20231205/pngtree-creamy-textured-milk-colored-background-image_13815875.png"); @@ -143,9 +138,64 @@ const StyledButton = styled.button` transform: scale(1.05); } + + &:active { + transform: scale(0.98); + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); + } + + `; -//changes in the images + + const products = [ + { id: 1, name: 'Espresso', price: 2.5, image: 'https://img.freepik.com/free-photo/caramel-latte-with-chocolade-table_140725-4.jpg?t=st=1727759794~exp=1727763394~hmac=c764d48b2b28767da2c6b996ec20e0d6a5857c19724850db5e46498687e16225&w=740', description: 'A strong, rich coffee shot, perfect for a quick pick-me-up.', type: 'hot' }, + { id: 2, name: 'Cappuccino', price: 3.5, image: 'https://img.freepik.com/free-photo/delicious-organic-latte-macchiato-with-milk_23-2148420329.jpg?t=st=1727761406~exp=1727765006~hmac=10f2d9d7a08693daef2ef87ff4edd99d5bc33e1813adb65c8628d088268239b5&w=1380 ', description: 'Creamy and frothy, a classic Italian coffee with steamed milk.', type: 'hot' }, + { id: 3, name: 'Latte', price: 4, image: 'https://img.freepik.com/free-photo/cold-chocolate-cocktail-with-ice-cream_140725-940.jpg?t=st=1727759865~exp=1727763465~hmac=ad44e2430bff005bce4db484fbef6f2ec22f05b97b41c8c6c28ecb8508c2d909&w=740 ', description: 'Smooth and milky, a comforting coffee drink with a velvety texture.', type: 'hot' }, + { id: 4, name: 'Mocha', price: 4.5, image: 'https://img.freepik.com/free-photo/delicious-quality-coffee-cup_23-2150691385.jpg?t=st=1727759888~exp=1727763488~hmac=ea5484acf51753db6069801c3df0caa601e5d09a2265109ba218d040acb3e53c&w=1380 ', description: 'A sweet blend of coffee and chocolate, perfect for chocolate lovers.', type: 'hot' }, + { id: 5, name: 'Americano', price: 3, image: 'https://img.freepik.com/free-photo/delicious-quality-coffee-cup_23-2150691389.jpg?t=st=1727759909~exp=1727763509~hmac=615986b69635b1e5a35b3a09347203d49046878d7525a9588f94211a3947ff58&w=1380 ', description: 'A diluted espresso shot, similar to brewed coffee but stronger.', type: 'hot' }, + { id: 6, name: 'Macchiato', price: 3.5, image: 'https://img.freepik.com/free-photo/assortment-with-frappe-dark-background_23-2148436976.jpg?t=st=1727761354~exp=1727764954~hmac=20b5ddf356f56d12e139084bc8e2c14ad3c71677269de9680db9dc4d09250774&w=740 ', description: 'An espresso with a dollop of foamed milk, rich and creamy.', type: 'hot' }, + { id: 7, name: 'Turkish Coffee', price: 3, image: 'https://img.freepik.com/premium-photo/pouring-turkish-coffee_772702-2136.jpg?w=360', description: 'Thick, strong, and unfiltered coffee, traditionally served in small cups.', type: 'hot' }, + { id: 8, name: 'Flat white', price: 5.5, image: 'https://static.toiimg.com/thumb/86699095.cms?imgsize=59654&width=509&height=340 ', description: 'Velvety microfoam poured over a double shot of espresso, smooth and creamy.', type: 'hot' }, + { id: 9, name: 'Nitro Cold Brew', price: 4.5, image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_ZcJOr1zaqJ-TkW9Ie1PcNRRrgPDnNSgX9A&s ', description: 'Cold brew infused with nitrogen, creating a creamy, Guinness-like texture.', type: 'cold' }, + { id: 10, name: 'Doppio', price: 3.4, image: 'https://lifeboostcoffee.com/cdn/shop/articles/Doppio_Espresso_Macchiato.jpg?v=1655197439 ', description: 'A double shot of espresso, strong and intense, perfect for espresso lovers.', type: 'hot' }, + { id: 11, name: 'Viennese Coffee', price: 4, image: 'https://irepo.primecp.com/2015/10/241007/Vienna-Coffee-01-12-07-OR_Category-CategoryPageDefault_ID-1242862.jpg?v=1242862 ', description: 'Espresso topped with whipped cream, often served with chocolate shavings.', type: 'cold' }, + { id: 12, name: 'Ristretto', price: 5.2, image: 'https://www.castironketo.net/wp-content/uploads/2023/10/is-ristretto-keto-friendly-header-image.jpg ', description: 'A short shot of espresso, sweeter and more concentrated than regular espresso.', type: 'hot' }, + { id: 13, name: 'Red Eye', price: 6.2, image: 'https://www.sessioncoffeedenver.com/wp-content/uploads/2024/04/what-is-a-red-eye-coffee.jpg ', description: 'A cup of brewed coffee with a shot of espresso, extra strong and caffeinated.', type: 'cold' }, + { id: 14, name: 'Frappé', price: 8.2, image: 'https://img.sndimg.com/food/image/upload/f_auto,c_thumb,q_55,w_860,ar_3:2/v1/img/recipes/23/29/18/x38TQCFcRRiV1FJYbTLP_coffeefrappe2.jpg', description: 'Iced coffee drink blended with milk and sugar, often topped with whipped cream.', type: 'cold' }, + { id: 15, name: 'Affogato', price: 8.6, image: 'https://static.wixstatic.com/media/6a3e8d_23b343395c7c47feab983d124cc9b4ce~mv2.jpg/v1/fill/w_568,h_770,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/6a3e8d_23b343395c7c47feab983d124cc9b4ce~mv2.jpg', description: 'A scoop of vanilla gelato drowned in a shot of hot espresso, sweet and creamy.', type: 'hot' }, + { id: 16, name: 'Cortado', price: 6, image: 'https://cdn.shopify.com/s/files/1/0677/6524/0096/files/coffee-in-a-glass-2022-11-02-18-50-07-utc_600x600.jpg?v=1683831169', description: 'Espresso cut with a small amount of warm milk to reduce acidity.', type: 'hot' }, + { id: 17, name: 'Café au lait', price: 3.8, image: 'https://blackturtlecoffee.com/cdn/shop/articles/Cafe-Au-Lait-004.jpg?v=1672848240', description: 'Coffee with hot milk, similar to a latte but with a stronger coffee flavor.', type: 'hot' }, + { id: 18, name: 'Café Bombón', price: 4.6, image: 'https://www.theworktop.com/wp-content/uploads/2021/11/cafe-bombon.jpg', description: 'Espresso served with sweetened condensed milk, creating a layered effect.', type: 'hot' }, + { id: 19, name: 'Chai', price: 7.3, image: 'https://img.freepik.com/free-photo/frappe-glass-slices-bread-with-seeds_23-2148623233.jpg?ga=GA1.1.1542821208.1727756299&semt=ais_hybrid', description: 'Spiced black tea brewed with milk and sweetened, aromatic and comforting.', type: 'hot' }, + { id: 20, name: 'Lemon Tea', price: 4.1, image: 'https://img.freepik.com/free-photo/cup-hot-mint-tea_144627-34462.jpg?ga=GA1.1.1542821208.1727756299&semt=ais_hybrid ', description: 'Refreshing black tea infused with lemon, perfect for a soothing experience.', type: 'hot' }, + { id: 21, name: 'Green Tea', price: 3.4, image: 'https://img.freepik.com/free-photo/cup-green-tea_144627-34463.jpg?ga=GA1.1.1542821208.1727756299&semt=ais_hybrid ', description: 'Light and delicate, made from unfermented tea leaves, rich in antioxidants.', type: 'hot' }, + { id: 22, name: 'Black Tea', price: 4.5, image: 'https://img.freepik.com/free-photo/cup-black-tea_144627-34464.jpg?ga=GA1.1.1542821208.1727756299&semt=ais_hybrid ', description: 'Strong and full-bodied, made from fully oxidized tea leaves, classic and robust.', type: 'hot' }, + { id: 23, name: 'Herbal Tea', price: 5.5, image: 'https://img.freepik.com/premium-photo/black-tea-cup-glass-mint-tea-leaves-white-isolated_127657-17608.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid ', description: 'Caffeine-free tea made from herbs, fruits, or spices, naturally soothing.', type: 'hot' }, + { id: 24, name: 'Iced Tea', price: 5.6, image: 'https://img.freepik.com/free-vector/long-island-ice-tea-cocktail-realistic_1284-3888.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid ', description: 'Refreshing chilled tea, often sweetened and served with lemon, perfect for hot days.', type: 'cold' }, + { id: 25, name: 'Irish Coffee', price: 7.2, image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRNlPYx_StS2Y7x9s4hukcCyJZaDm54mgbe8g&s', description: 'Coffee with Irish whiskey, sugar, and cream, a warm and boozy treat.' }, + { id: 26, name: 'Strawberry smoothie', price: 6.2, image: 'https://www.eatingwell.com/thmb/TBp6lbiwoYPhRP4N__4sROiUDhA=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/mixed-berry-breakfast-smoothie-7959466-1x1-e0ad2304222e49508cda7b73b21de921.jpg', description: 'Creamy and sweet, made with fresh strawberries, yogurt, and a touch of honey.', type: 'cold' }, + { id: 27, name: 'Mango smoothie', price: 3.2, image: 'https://cdn.loveandlemons.com/wp-content/uploads/2023/05/mango-smoothie.jpg', description: 'Tropical and refreshing, blended with ripe mangoes, banana, and coconut milk.', type: 'cold' }, + { id: 28, name: 'Strawberry banana smoothie', price: 6.45, image: 'https://www.purelykaylie.com/wp-content/uploads/2023/07/strawberry-banana-smoothie-bowl-5.jpg', description: 'A classic combination of strawberries and bananas, creamy and naturally sweet.', type: 'cold' }, + { id: 29, name: 'Creamy, Nutty Coffee Smoothie', price: 7.2, image: 'https://www.seriouseats.com/thmb/dwKjOOPQu1ki3pSf1M4eB7FGVzI=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/20240206-SEA-Coffee-Smoothie-hero-27d1864a41cc411ea7ff0c64ada77a2e.jpg', description: 'A rich blend of coffee, nuts, and cream, perfect for a morning energy boost.', type: 'cold' }, + { id: 30, name: 'Coffee Smoothie', price: 6.3, image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-Y9in1wQf-XCl9sdyuw5pXWT_CrYn8P5j7A&s', description: 'Creamy and caffeinated, made with cold brew, banana, and almond milk.', type: 'cold' }, + { id: 31, name: 'Chocolate Milkshake', price: 5.2, image: 'https://www.sharmispassions.com/wp-content/uploads/2012/07/chocolate-milkshake1.jpg', description: 'Rich and indulgent, made with chocolate ice cream, milk, and whipped cream.', type: 'cold' }, + { id: 32, name: 'Oreo Milkshake', price: 5.2, image: 'https://www.solara.in/cdn/shop/articles/Oreo_Milkshake.jpg?v=1715757748&width=2048', description: 'Creamy and delicious, blended with Oreo cookies, ice cream, and milk.', type: 'cold' }, + { id: 33, name: 'Strawberry Oreo Milkshake', price: 2.6, image: 'https://marleysmenu.com/wp-content/uploads/2021/08/Strawberry-Oreo-Milkshake-Featured-Image.jpg', description: 'A sweet blend of strawberries, Oreo cookies, and ice cream, perfect for dessert lovers.', type: 'cold' }, + { id: 34, name: 'Mixed Nut and Fruit Milkshake', price: 8.2, image: 'https://images.mrcook.app/recipe-image/018d50f7-344f-7744-97e3-1f89e5a3cf29', description: 'A nutritious blend of mixed nuts, fruits, and milk, creamy and satisfying.', type: 'cold' }, + { id: 35, name: 'Peanut Butter Milkshake', price: 5.8, image: 'https://www.julieseatsandtreats.com/wp-content/uploads/2021/08/Peanut-Butter-Milkshake-Square.jpg', description: "Rich and creamy, made with peanut butter, ice cream, and milk, a peanut butter lover's dream.", type: 'cold'}, + { id: 36, name: 'Oreo cheese cake', price: 9.2, image: 'https://handletheheat.com/wp-content/uploads/2015/11/oreo-cheesecake-recipe-SQUARE.jpg', description: 'Creamy cheesecake with an Oreo crust and topping, rich and indulgent.', type: 'food' }, + { id: 37, name: 'Chocolate cake', price: 7.2, image: 'https://img.freepik.com/free-photo/chocolate-cake_1203-8942.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid', description: 'Moist and decadent, a classic chocolate cake perfect for any celebration.', type: 'food' }, + { id: 38, name: 'Red velvet cake', price: 4.2, image: 'https://img.freepik.com/free-photo/top-view-red-strawberry-cake-delicious-with-tea-table-fruit-color-cake-biscuit-sweet_140725-28319.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid', description: 'Rich and velvety, a moist red cake with cream cheese frosting, elegant and delicious.', type: 'food' }, + { id: 39, name: 'Cheese cake', price: 8.2, image: 'https://img.freepik.com/premium-photo/citrus-cheesecake-cake-with-kumquats_82780-1574.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid', description: 'Creamy and smooth, a classic cheesecake with a graham cracker crust, perfect for dessert.', type: 'food' }, + { id: 40, name: 'Blueberry cake', price: 3.2, image: 'https://img.freepik.com/premium-photo/pieces-pie-from-cottage-cheese-blueberries_116441-1516.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid', description: 'Moist and bursting with blueberries, a sweet and tangy cake perfect for any occasion.', type: 'food' }, + { id: 41, name: 'Strawberry cake', price: 6, image: 'https://img.freepik.com/free-photo/delicious-cake-with-strawberries_23-2150797874.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid', description: 'Light and fluffy, a sweet strawberry cake with creamy frosting, perfect for summer.', type: 'food' }, + { id: 42, name: 'Salad', price: 7.3, image: 'https://img.freepik.com/free-photo/dietary-salad-with-tomatoes-feta-lettuce-spinach-pine-nuts_2829-20128.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid', description: 'Fresh and healthy, a mix of greens, vegetables, and a tangy dressing, perfect for a light meal.', type: 'food' }, + { id: 43, name: 'Tomato soup', price: 6.7, image: 'https://img.freepik.com/free-photo/portrait-shooting-tomato-soup-with-crackers-cheese-tomatoes-bread-table_141793-2858.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid', description: 'Warm and comforting, a classic tomato soup perfect for a cozy meal, often served with grilled cheese.', type: 'food' }, + { id: 44, name: 'Chicken Noodle soup', price: 8.2, image: 'https://img.freepik.com/free-photo/delicious-noodle-soup-with-chicken-uncooked-pasta-small-brown-bowl-spoon-garlic-dark-background_140725-140085.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid', description: 'Hearty and soothing, a classic soup with chicken, noodles, and vegetables, perfect for cold days.', type: 'food' }, + { id: 45, name: 'Miso soup', price: 7.5, image: 'https://img.freepik.com/free-photo/top-view-japanese-food-bowls-arrangement_23-2148809848.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid', description: 'Savory and umami-rich, a traditional Japanese soup made with miso paste and dashi broth.', type: 'food' }, + { id: 46, name: 'Cold cucumber soup', price: 7.34, image: 'https://img.freepik.com/free-photo/cold-cucumber-soup-with-dried-tomatoes-mozzarella_2829-14287.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid', description: 'Refreshing and cool, a chilled soup made with cucumbers, yogurt, and herbs, perfect for summer.', type: 'food' }, + { id: 47, name: 'Tom Yum Soup', price: 9.2, image: 'https://img.freepik.com/free-photo/tom-yum-kung-thai-hot-spicy-soup-shrimp-with-lemon-grass-lemon-galangal-chilli-wooden-table-thailand-food_1150-21078.jpg?ga=GA1.1.900909129.1729318722&semt=ais_hybrid', description: 'Spicy and aromatic, a Thai soup with lemongrass, kaffir lime leaves, and chilies, often with shrimp.', type: 'food' }, { @@ -319,6 +369,7 @@ const products = [ "Coffee with Irish whiskey, sugar, and cream, a warm and boozy treat.", }, + ]; // Tea Section @@ -587,12 +638,18 @@ const products = [ function Shop() { const dispatch = useDispatch(); + + const [category, setCategory] = useState("hot"); + const handleAddToCart = (product) => { dispatch(addToCart(product)); + toast.success(`${product.name} added to cart!`); }; + + const handleClick = (value) => { setCategory(value); } @@ -610,208 +667,142 @@ function Shop() { setItemsNo(Math.min(itemsNo + 9,s)); } } - return ( - - - Our Beverage Selection - - - - - - - - - - - {filteredProducts.slice(0, itemsNo).map((product) => ( - - - - {product.name} - ${product.price.toFixed(2)} - - - - ))} -
- -
- - - + <Title initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1 }}> + Our Coffee Selection + + + + - - - - ))} - - - + <Button + onClick={() => setCategory("cold")} + style={{ + width: '200px', + backgroundColor: category === "cold" ? "#f0efdc" : "#7c2414", + color: category === "cold" ? "black" : "white", + }} > - Our Smoothie and Milkshake Selection - - - {product2.map((product) => ( - -
- - - {product.description} - -
- - {product.name} - ${product.price.toFixed(2)} - - - - - - ))} - - - + <Button + onClick={() => setCategory("food")} + style={{ + width: '200px', + backgroundColor: category === "food" ? "#f0efdc" : "#7c2414", + color: category === "food" ? "black" : "white", + }} > - Our Cake Selection - - - {product3.map((product) => ( - -
- - - {product.description} - -
- - {product.name} - ${product.price.toFixed(2)} - - - - - - ))} - - - - Our Soup and Salad Selection - - - {product4.map((product) => ( - + + + + {filteredProducts.slice(0, itemsNo).map((product) => ( + + + -
- - - {product.description} - -
- - {product.name} - ${product.price.toFixed(2)} - - - - - - ))} - - - ); + {product.name} + ${product.price.toFixed(2)} + handleAddToCart(product)}> + Add to Cart + + + + ))} +
+ +
+ + + + + {[product1, product2, product3, product4].map((productList, index) => ( + + + {index === 0 + ? "Our Tea Selection" + : index === 1 + ? "Our Smoothie and Milkshake Selection" + : index === 2 + ? "Our Cake Selection" + : "Our Soup and Salad Selection"} + + + {productList.map((product) => ( + +
+ + + {product.description} + +
+ + {product.name} + ${product.price.toFixed(2)} + + + + + ))} + + + ))} + +); } export default Shop; diff --git a/src/Pages/cart.js b/src/Pages/cart.js index 5d3f3b5..4ecffb4 100644 --- a/src/Pages/cart.js +++ b/src/Pages/cart.js @@ -3,6 +3,8 @@ import { useSelector, useDispatch } from 'react-redux'; import { removeFromCart, updateQuantity, clearCart } from '../Store/cartSlice'; // Import clearCart action import styled from 'styled-components'; import { motion } from 'framer-motion'; +import { toast } from 'react-toastify'; +import 'react-toastify/dist/ReactToastify.css'; const CartContainer = styled.div` padding: 2rem; @@ -86,10 +88,12 @@ function Cart() { const handleRemoveFromCart = (productId) => { dispatch(removeFromCart(productId)); + toast.error('Item removed from cart!'); }; const handleUpdateQuantity = (productId, quantity) => { dispatch(updateQuantity({ productId, quantity: parseInt(quantity) })); + toast.info('Cart updated!'); }; const totalPrice = cartItems.reduce( @@ -168,4 +172,4 @@ function Cart() { ); } -export default Cart; \ No newline at end of file +export default Cart;