diff --git a/src/components/categories/CategoryList.jsx b/src/components/categories/CategoryList.jsx index 8dc0b43..7715b7c 100644 --- a/src/components/categories/CategoryList.jsx +++ b/src/components/categories/CategoryList.jsx @@ -8,10 +8,10 @@ const CategoryList = () => { // Updated categories array with names and specifications const categories = [ - { name: 'Shirts', image: 'https://www2.hm.com/en_in/productpage.1032522123.html', description: 'shirts' }, - { name: 'Suits', image: 'https://www2.hm.com/en_in/productpage.1032522123.html', description: 'suits' }, - { name: 'Tuxedos', image: 'https://www2.hm.com/en_in/productpage.1032522123.html', description: 'tuxedos' }, - { name: 'Jackets', image: 'https://image.coolblue.nl/422x390/products/1101120', description: 'jackets' }, + { name: 'Shirts', image: 'https://img.freepik.com/premium-photo/blue-shirt-white-isolated_267651-1565.jpg?w=740', description: 'shirts' }, + { name: 'Suits', image: 'https://img.freepik.com/free-psd/realistic-suit-illustration_23-2151236757.jpg?t=st=1722512180~exp=1722515780~hmac=79030884ba3866ce8461b252477505e74e625c63012705c110eced45b59c63fb&w=740', description: 'suits' }, + { name: 'Tuxedos', image: 'https://img.freepik.com/premium-vector/businessman-suit_98292-5674.jpg?w=740', description: 'tuxedos' }, + { name: 'Jackets', image: 'https://img.freepik.com/free-photo/still-life-rendering-jackets-display_23-2149745027.jpg?t=st=1722512352~exp=1722515952~hmac=ac34ad84d45b411fb64951e7324277994ed07ec0357b343ad4e5db09ea55e67f&w=360', description: 'jackets' }, ]; const handleClick = (category) => { @@ -48,5 +48,4 @@ const CategoryList = () => { ); }; - export default CategoryList; diff --git a/src/components/categories/JacketsProductList.jsx b/src/components/categories/JacketsProductList.jsx index 222cbed..0bb97f6 100644 --- a/src/components/categories/JacketsProductList.jsx +++ b/src/components/categories/JacketsProductList.jsx @@ -5,12 +5,12 @@ import ProductRow from './ProductRow'; import '../../styles/ProductList.css'; const products = [ - { id: 1, name: 'red bomber jacket', price: 129, image: 'path/to/red-bomber-jacket-image.png' }, - { id: 2, name: 'green utility jacket', price: 149, image: 'path/to/green-utility-jacket-image.png' }, - { id: 3, name: 'black leather jacket', price: 199, image: 'path/to/black-leather-jacket-image.png' }, - { id: 4, name: 'blue aces', price: 99, image: 'path/to/blue-aces-image.png' }, - { id: 5, name: 'blue birdseye', price: 99, image: 'path/to/blue-birdseye-image.png' }, - { id: 6, name: 'blue hydrangea', price: 99, image: 'path/to/blue-hydrangea-image.png' }, + { id: 1, name: 'red bomber jacket', price: 129, image: 'https://img.freepik.com/premium-psd/mens-bomber-jacket-mockup_1119-1729.jpg?w=996' }, + { id: 2, name: 'green utility jacket', price: 149, image: 'https://img.freepik.com/premium-psd/mens-bomber-jacket-mockup_1119-1729.jpg?w=996' }, + { id: 3, name: 'black leather jacket', price: 199, image: 'https://img.freepik.com/premium-psd/mens-bomber-jacket-mockup_1119-1729.jpg?w=996' }, + { id: 4, name: 'blue aces', price: 99, image: 'https://img.freepik.com/premium-psd/mens-bomber-jacket-mockup_1119-1729.jpg?w=996' }, + { id: 5, name: 'blue birdseye', price: 99, image: 'https://img.freepik.com/premium-psd/mens-bomber-jacket-mockup_1119-1729.jpg?w=996' }, + { id: 6, name: 'blue hydrangea', price: 99, image: 'https://img.freepik.com/premium-psd/mens-bomber-jacket-mockup_1119-1729.jpg?w=996' }, ]; const JacketsProductList = () => { @@ -27,7 +27,7 @@ const JacketsProductList = () => { {/* Main content */}
-

Products (Jackets)

+

products (jackets)

Total jackets: ({products.length})

diff --git a/src/components/categories/ProductRow.jsx b/src/components/categories/ProductRow.jsx index 8dcdbe1..f4b34d2 100644 --- a/src/components/categories/ProductRow.jsx +++ b/src/components/categories/ProductRow.jsx @@ -12,7 +12,7 @@ const ProductRow = ({ className = "", image17, shirts, onClick, propLeft, propTo return (
{shirts} -
-
+
+
{shirts}
-
-
- Click to view product details -
-
+ {/* Customize Button */}
); diff --git a/src/components/categories/ShirtsProductList.jsx b/src/components/categories/ShirtsProductList.jsx index 3037969..63bb41d 100644 --- a/src/components/categories/ShirtsProductList.jsx +++ b/src/components/categories/ShirtsProductList.jsx @@ -5,12 +5,14 @@ import ProductRow from './ProductRow'; import '../../styles/ProductList.css'; const products = [ - { id: 1, name: 'blue aces', price: 99, image: 'path/to/blue-aces-image.png' }, - { id: 2, name: 'blue birdseye', price: 99, image: 'path/to/blue-birdseye-image.png' }, - { id: 3, name: 'blue hydrangea', price: 99, image: 'path/to/blue-hydrangea-image.png' }, - { id: 4, name: 'blue aces', price: 99, image: 'path/to/blue-aces-image.png' }, - { id: 5, name: 'blue birdseye', price: 99, image: 'path/to/blue-birdseye-image.png' }, - { id: 6, name: 'blue hydrangea', price: 99, image: 'path/to/blue-hydrangea-image.png' }, + { id: 1, name: 'blue aces', price: 99, image: 'https://img.freepik.com/premium-photo/bright-striped-shirt-isolated-white-background_639785-65791.jpg?w=740' }, + { id: 2, name: 'blue birdseye', price: 99, image: 'https://img.freepik.com/premium-photo/bright-striped-shirt-isolated-white-background_639785-65791.jpg?w=740' }, + { id: 3, name: 'blue hydrangea', price: 99, image: 'https://img.freepik.com/premium-photo/bright-striped-shirt-isolated-white-background_639785-65791.jpg?w=740' }, + { id: 4, name: 'blue aces', price: 99, image: 'https://img.freepik.com/premium-photo/bright-striped-shirt-isolated-white-background_639785-65791.jpg?w=740' }, + { id: 5, name: 'blue birdseye', price: 99, image: 'https://img.freepik.com/premium-photo/bright-striped-shirt-isolated-white-background_639785-65791.jpg?w=740' }, + { id: 6, name: 'blue hydrangea', price: 99, image: 'https://img.freepik.com/premium-photo/bright-striped-shirt-isolated-white-background_639785-65791.jpg?w=740' }, + { id: 7, name: 'blue birdseye', price: 99, image: 'https://img.freepik.com/premium-photo/bright-striped-shirt-isolated-white-background_639785-65791.jpg?w=740' }, + { id: 8, name: 'blue hydrangea', price: 99, image: 'https://img.freepik.com/premium-photo/bright-striped-shirt-isolated-white-background_639785-65791.jpg?w=740' }, ]; const ShirtsProductList = () => { @@ -27,7 +29,7 @@ const ShirtsProductList = () => { {/* Main content */}
-

Products (Shirts)

+

products (shirts)

Total shirts: ({products.length})

@@ -57,10 +59,9 @@ const ShirtsProductList = () => { onClick={() => handleCustomize(product.id)} /> ))} -
+
); }; - export default ShirtsProductList; diff --git a/src/components/categories/SuitsProductList.jsx b/src/components/categories/SuitsProductList.jsx index 1ba321c..7da71d9 100644 --- a/src/components/categories/SuitsProductList.jsx +++ b/src/components/categories/SuitsProductList.jsx @@ -5,12 +5,12 @@ import ProductRow from './ProductRow'; import '../../styles/ProductList.css'; const products = [ - { id: 1, name: 'blue aces', price: 99, image: 'path/to/blue-aces-image.png' }, - { id: 2, name: 'blue birdseye', price: 99, image: 'path/to/blue-birdseye-image.png' }, - { id: 3, name: 'blue hydrangea', price: 99, image: 'path/to/blue-hydrangea-image.png' }, - { id: 4, name: 'blue aces', price: 99, image: 'path/to/blue-aces-image.png' }, - { id: 5, name: 'blue birdseye', price: 99, image: 'path/to/blue-birdseye-image.png' }, - { id: 6, name: 'blue hydrangea', price: 99, image: 'path/to/blue-hydrangea-image.png' }, + { id: 1, name: 'blue aces', price: 99, image: 'https://img.freepik.com/premium-photo/blue-suit-with-pocket-square-pocket-square_916191-4671.jpg?w=1060' }, + { id: 2, name: 'blue birdseye', price: 99, image: 'https://img.freepik.com/premium-photo/blue-suit-with-pocket-square-pocket-square_916191-4671.jpg?w=1060' }, + { id: 3, name: 'blue hydrangea', price: 99, image: 'https://img.freepik.com/premium-photo/blue-suit-with-pocket-square-pocket-square_916191-4671.jpg?w=1060' }, + { id: 4, name: 'blue aces', price: 99, image: 'https://img.freepik.com/premium-photo/blue-suit-with-pocket-square-pocket-square_916191-4671.jpg?w=1060' }, + { id: 5, name: 'blue birdseye', price: 99, image: 'https://img.freepik.com/premium-photo/blue-suit-with-pocket-square-pocket-square_916191-4671.jpg?w=1060' }, + { id: 6, name: 'blue hydrangea', price: 99, image: 'https://img.freepik.com/premium-photo/blue-suit-with-pocket-square-pocket-square_916191-4671.jpg?w=1060' }, ]; const SuitsProductList = () => { @@ -27,7 +27,7 @@ const SuitsProductList = () => { {/* Main content */}
-

Products (Suits)

+

products (suits)

Total suits: ({products.length})

@@ -52,8 +52,8 @@ const SuitsProductList = () => { {products.map((product) => ( handleCustomize(product.id)} /> ))} diff --git a/src/components/categories/TuxedosProductList.jsx b/src/components/categories/TuxedosProductList.jsx index 676f64d..79140fa 100644 --- a/src/components/categories/TuxedosProductList.jsx +++ b/src/components/categories/TuxedosProductList.jsx @@ -5,12 +5,12 @@ import ProductRow from './ProductRow'; import '../../styles/ProductList.css'; const products = [ - { id: 1, name: 'black tuxedo', price: 199, image: 'path/to/black-tuxedo-image.png' }, - { id: 2, name: 'navy tuxedo', price: 199, image: 'path/to/navy-tuxedo-image.png' }, - { id: 3, name: 'grey tuxedo', price: 199, image: 'path/to/grey-tuxedo-image.png' }, - { id: 4, name: 'blue aces', price: 99, image: 'path/to/blue-aces-image.png' }, - { id: 5, name: 'blue birdseye', price: 99, image: 'path/to/blue-birdseye-image.png' }, - { id: 6, name: 'blue hydrangea', price: 99, image: 'path/to/blue-hydrangea-image.png' }, + { id: 1, name: 'black tuxedo', price: 199, image: 'https://img.freepik.com/free-photo/mens-suit-photography_1409-5606.jpg?t=st=1722512821~exp=1722516421~hmac=382d80f23936af8160894d570a04e687dc3e41f045803cc88f16eaf0e816583a&w=740' }, + { id: 2, name: 'navy tuxedo', price: 199, image: 'https://img.freepik.com/free-photo/mens-suit-photography_1409-5606.jpg?t=st=1722512821~exp=1722516421~hmac=382d80f23936af8160894d570a04e687dc3e41f045803cc88f16eaf0e816583a&w=740' }, + { id: 3, name: 'grey tuxedo', price: 199, image: 'https://img.freepik.com/free-photo/mens-suit-photography_1409-5606.jpg?t=st=1722512821~exp=1722516421~hmac=382d80f23936af8160894d570a04e687dc3e41f045803cc88f16eaf0e816583a&w=740' }, + { id: 4, name: 'blue aces', price: 99, image: 'https://img.freepik.com/free-photo/mens-suit-photography_1409-5606.jpg?t=st=1722512821~exp=1722516421~hmac=382d80f23936af8160894d570a04e687dc3e41f045803cc88f16eaf0e816583a&w=740' }, + { id: 5, name: 'blue birdseye', price: 99, image: 'https://img.freepik.com/free-photo/mens-suit-photography_1409-5606.jpg?t=st=1722512821~exp=1722516421~hmac=382d80f23936af8160894d570a04e687dc3e41f045803cc88f16eaf0e816583a&w=740' }, + { id: 6, name: 'blue hydrangea', price: 99, image: 'https://img.freepik.com/free-photo/mens-suit-photography_1409-5606.jpg?t=st=1722512821~exp=1722516421~hmac=382d80f23936af8160894d570a04e687dc3e41f045803cc88f16eaf0e816583a&w=740' }, ]; const TuxedosProductList = () => { @@ -27,7 +27,7 @@ const TuxedosProductList = () => { {/* Main content */}
-

Products (Tuxedos)

+

products (tuxedos)

Total tuxedos: ({products.length})

diff --git a/src/components/customize/Customize.jsx b/src/components/customize/Customize.jsx index 225c680..edaa515 100644 --- a/src/components/customize/Customize.jsx +++ b/src/components/customize/Customize.jsx @@ -1,17 +1,31 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { useParams, useNavigate, Link } from 'react-router-dom'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faChevronLeft } from '@fortawesome/free-solid-svg-icons'; -import Sidebar from '../sidebar/Sidebar'; +import Sidebar from '../sidebar/Sidebar'; import '../../styles/Customize.css'; - - const Customize = () => { const { id } = useParams(); const navigate = useNavigate(); const [style, setStyle] = useState(''); const [material, setMaterial] = useState(''); + const [productImage, setProductImage] = useState(''); + + useEffect(() => { + // Fetch the product image URL based on the product ID + const fetchProductImage = async () => { + try { + const response = await fetch(`/api/products/${id}`); + const data = await response.json(); + setProductImage(data.imageUrl); // Assume `data.imageUrl` is the URL of the product image + } catch (error) { + console.error('Error fetching product image:', error); + } + }; + + fetchProductImage(); + }, [id]); const handleStyleChange = (event) => { setStyle(event.target.value); @@ -46,27 +60,34 @@ const Customize = () => { }; return ( -
+
{/* Sidebar */} {/* Main content */}
-
- - + {/* Header */} +
+ + -

Customize Product

+

Customize Product

-
-
+ + {/* Content */} +
+ {/* Customization Options */} +
+

Customize

+ + {/* Style Selection */}
+ + {/* Material Selection */}
+ + {/* Save Button */}
+ + {/* Product Image */} +
+ {productImage ? ( + Product + ) : ( +

Loading image...

+ )} +
diff --git a/src/pages/AdminDashboard.jsx b/src/pages/AdminDashboard.jsx index ff24d67..0098d94 100644 --- a/src/pages/AdminDashboard.jsx +++ b/src/pages/AdminDashboard.jsx @@ -29,7 +29,7 @@ const AdminDashboard = () => {
Dashboard Graphic diff --git a/src/pages/EmployeeDashboard.jsx b/src/pages/EmployeeDashboard.jsx index 3816e6f..259cd4a 100644 --- a/src/pages/EmployeeDashboard.jsx +++ b/src/pages/EmployeeDashboard.jsx @@ -44,7 +44,7 @@ const EmployeeDashboard = () => {
- Suit + Suit