diff --git a/src/App.jsx b/src/App.jsx index d735aa8..a06e88e 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -17,8 +17,14 @@ import CategoryList from "./components/categories/CategoryList"; import ShirtsProductList from "./components/categories/ShirtsProductList"; import SuitsProductList from "./components/categories/SuitsProductList"; import TuxedosProductList from "./components/categories/TuxedosProductList"; -import JacketsProductList from "./components/categories/JacketsProductList"; -import Customize from "./components/customize/Customize"; + + +import JacketsProductList from "./components/categories/JacketsProductList.jsx"; +import Customize from "./components/customize/Customize.jsx"; +import SetMeasurements from "./components/customize/SetMeasurements.jsx"; +import StandardMeasurements from "./components/customize/StandardMeasurements.jsx"; +import CustomMeasurements from "./components/customize/CustomMeasurements.jsx"; + import { Refine } from "@refinedev/core"; @@ -58,6 +64,9 @@ const App = () => { } /> } /> } /> + } /> + } /> + } /> diff --git a/src/components/customize/CustomMeasurements.jsx b/src/components/customize/CustomMeasurements.jsx new file mode 100644 index 0000000..9ea7f3c --- /dev/null +++ b/src/components/customize/CustomMeasurements.jsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +const CustomMeasurements = () => { + return ( +
+

Custom Measurements

+
+
+ + +
+
+ + +
+ +
+ Back to Measurements +
+ ); +}; + +export default CustomMeasurements; diff --git a/src/components/customize/Customize.jsx b/src/components/customize/Customize.jsx index edaa515..fa763fd 100644 --- a/src/components/customize/Customize.jsx +++ b/src/components/customize/Customize.jsx @@ -52,7 +52,7 @@ const Customize = () => { .then(response => response.json()) .then(data => { console.log('Success:', data); - navigate('/'); + navigate('/setmeasurements'); // Redirect to the Set Measurements page }) .catch((error) => { console.error('Error:', error); @@ -77,9 +77,9 @@ const Customize = () => { {/* Content */}
{/* Customization Options */} -
+

Customize

- + {/* Style Selection */}
{/* Product Image */} -
+
{productImage ? ( Product ) : ( diff --git a/src/components/customize/SetMeasurements.jsx b/src/components/customize/SetMeasurements.jsx new file mode 100644 index 0000000..f53e914 --- /dev/null +++ b/src/components/customize/SetMeasurements.jsx @@ -0,0 +1,71 @@ +import React, { useState } from 'react'; +import { useNavigate, Link } from 'react-router-dom'; // Add Link here +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faChevronLeft } from '@fortawesome/free-solid-svg-icons'; +import Sidebar from '../sidebar/Sidebar'; +// import '../../styles/Measurements.css'; + +const SetMeasurements = () => { + const [selectedOption, setSelectedOption] = useState('standard'); + const navigate = useNavigate(); + + const handleOptionChange = (event) => { + setSelectedOption(event.target.value); + }; + + const handleContinue = () => { + if (selectedOption === 'standard') { + navigate('/measurements/standard'); + } else { + navigate('/measurements/custom'); + } + }; + + return ( +
+ +
+
+ + + +

Set Measurements

+
+
+
+
+ + +
+ +
+
+
+
+ ); +}; + +export default SetMeasurements; diff --git a/src/components/customize/StandardMeasurements.jsx b/src/components/customize/StandardMeasurements.jsx new file mode 100644 index 0000000..98a8b05 --- /dev/null +++ b/src/components/customize/StandardMeasurements.jsx @@ -0,0 +1,66 @@ +import React, { useState } from 'react'; +import { 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 '../../styles/Measurements.css'; + +const StandardMeasurements = () => { + + const [selectedSize, setSelectedSize] = useState('medium'); + + const handleSizeChange = (event) => { + setSelectedSize(event.target.value); + }; + + return ( +
+ +
+
+ + + +

standard measurements

+
+
+ Product +
+

blue aces

+

+ this is a comfortable and stylish blue t-shirt made from high-quality cotton. perfect for casual outings and daily wear. +

+

$99.00

+
+ + +
+

selected size: {selectedSize}

{/* Display selected size */} + +
+
+
+
+ ); +}; + +export default StandardMeasurements; diff --git a/src/components/sidebar/EmployeeSidebar.jsx b/src/components/sidebar/EmployeeSidebar.jsx index 813c1d5..5c31da8 100644 --- a/src/components/sidebar/EmployeeSidebar.jsx +++ b/src/components/sidebar/EmployeeSidebar.jsx @@ -47,7 +47,7 @@ const EmployeeSidebar = () => { Add Customer - + Orders diff --git a/src/styles/Measurements.css b/src/styles/Measurements.css new file mode 100644 index 0000000..4e822bc --- /dev/null +++ b/src/styles/Measurements.css @@ -0,0 +1,24 @@ +.custom-select { + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + background: transparent; + border: 1px solid #d1d5db; /* Tailwind's border-gray-300 */ + border-radius: 0.375rem; /* Tailwind's rounded */ + padding: 0.5rem 2.5rem 0.5rem 0.75rem; /* Adjust padding for arrow */ + font-size: 1rem; /* Tailwind's text-sm */ + } + .custom-select::after { + content: '▼'; /* Unicode arrow */ + position: absolute; + top: 50%; + right: 0.75rem; /* Adjust as needed */ + transform: translateY(-50%); + pointer-events: none; + color: #6b7280; /* Tailwind's text-gray-700 */ + } + .select-container { + position: relative; + display: inline-block; + width: 100%; /* Ensure full width */ + } \ No newline at end of file