added setmeasurements page and standardmeaurement page
This commit is contained in:
Suraj Birewar
parent
04dfce9c3b
commit
c13fb500f6
13
src/App.jsx
13
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 = () => {
|
||||
<Route path="/products/tuxedos" element={<TuxedosProductList />} />
|
||||
<Route path="/products/jackets" element={<JacketsProductList />} />
|
||||
<Route path="/customize/:id" element={<Customize />} />
|
||||
<Route path="/setmeasurements" element={<SetMeasurements />} />
|
||||
<Route path="/measurements/standard" element={<StandardMeasurements />} />
|
||||
<Route path="/measurements/custom" element={<CustomMeasurements />} />
|
||||
</Routes>
|
||||
</Content>
|
||||
</div>
|
||||
|
||||
26
src/components/customize/CustomMeasurements.jsx
Normal file
26
src/components/customize/CustomMeasurements.jsx
Normal file
@ -0,0 +1,26 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const CustomMeasurements = () => {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-screen">
|
||||
<h2 className="text-2xl font-medium mb-4">Custom Measurements</h2>
|
||||
<form className="w-full max-w-md">
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700">Chest Size:</label>
|
||||
<input type="text" className="mt-1 block w-full" placeholder="Enter chest size" />
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700">Waist Size:</label>
|
||||
<input type="text" className="mt-1 block w-full" placeholder="Enter waist size" />
|
||||
</div>
|
||||
<button type="submit" className="w-full py-2 px-4 ">
|
||||
Save Measurements
|
||||
</button>
|
||||
</form>
|
||||
<Link to="/measurements" className="mt-4 text-blue-500">Back to Measurements</Link>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomMeasurements;
|
||||
@ -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 */}
|
||||
<div className="flex-grow flex items-stretch p-8">
|
||||
{/* Customization Options */}
|
||||
<div className="bg-white p-6 rounded-lg w-1/3 mr-4">
|
||||
<div className="bg-white p-6 rounded-lg w-1/3 mr-4">
|
||||
<h2 className="text-lg font-medium text-gray-700 mb-4">Customize</h2>
|
||||
|
||||
|
||||
{/* Style Selection */}
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
@ -117,14 +117,14 @@ const Customize = () => {
|
||||
{/* Save Button */}
|
||||
<button
|
||||
onClick={handleSave}
|
||||
className="w-full py-2 px-4 "
|
||||
className="w-full py-2 px-4"
|
||||
>
|
||||
Save Style and Material
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Product Image */}
|
||||
<div className="bg-white p-6 rounded-lg flex-grow">
|
||||
<div className="bg-white p-6 rounded-lg flex-grow">
|
||||
{productImage ? (
|
||||
<img src={productImage} alt="Product" className="w-full h-auto rounded-lg" />
|
||||
) : (
|
||||
|
||||
71
src/components/customize/SetMeasurements.jsx
Normal file
71
src/components/customize/SetMeasurements.jsx
Normal file
@ -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 (
|
||||
<div className="flex h-screen">
|
||||
<Sidebar />
|
||||
<div className="flex-grow flex flex-col">
|
||||
<div className="bg-white p-4 flex items-center">
|
||||
<Link to="/customize/:id">
|
||||
<FontAwesomeIcon icon={faChevronLeft} />
|
||||
</Link>
|
||||
<h1 className="ml-4 text-2xl font-medium text-gray-700">Set Measurements</h1>
|
||||
</div>
|
||||
<div className="flex-grow flex items-center justify-center p-8">
|
||||
<div className="bg-white p-6 rounded-lg shadow-lg w-full max-w-md">
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
<input
|
||||
type="radio"
|
||||
value="standard"
|
||||
checked={selectedOption === 'standard'}
|
||||
onChange={handleOptionChange}
|
||||
className="mr-2"
|
||||
/>
|
||||
Standard Measurements
|
||||
</label>
|
||||
<label className="block text-sm font-medium text-gray-700 mt-2">
|
||||
<input
|
||||
type="radio"
|
||||
value="custom"
|
||||
checked={selectedOption === 'custom'}
|
||||
onChange={handleOptionChange}
|
||||
className="mr-2"
|
||||
/>
|
||||
Custom Measurements
|
||||
</label>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleContinue}
|
||||
className="w-full py-2 px-4"
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SetMeasurements;
|
||||
66
src/components/customize/StandardMeasurements.jsx
Normal file
66
src/components/customize/StandardMeasurements.jsx
Normal file
@ -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 (
|
||||
<div className="flex">
|
||||
<Sidebar />
|
||||
<div className="w-full ml-10 p-2">
|
||||
<div className="bg-white p-4 flex items-center">
|
||||
<Link to="/setmeasurements">
|
||||
<FontAwesomeIcon icon={faChevronLeft} />
|
||||
</Link>
|
||||
<h1 className="ml-4 text-2xl font-medium text-gray-700">standard measurements</h1>
|
||||
</div>
|
||||
<div className="flex mt-4">
|
||||
<img
|
||||
src="https://5.imimg.com/data5/HM/AE/VV/SELLER-77211399/white-plain-tshirts.jpg"
|
||||
alt="Product"
|
||||
className="w-1/3 h-auto mr-4" // Adjust width and margin as needed
|
||||
/>
|
||||
<div className="w-2/3">
|
||||
<p className="text-xl mb-4 text-gray-700">blue aces</p>
|
||||
<p className="text-md mb-4 text-gray-600">
|
||||
this is a comfortable and stylish blue t-shirt made from high-quality cotton. perfect for casual outings and daily wear.
|
||||
</p>
|
||||
<p className="text-xl mb-4 text-gray-700">$99.00</p>
|
||||
<div className="mb-4 select-container">
|
||||
<label htmlFor="size" className="block text-sm font-medium text-gray-700">
|
||||
size:
|
||||
</label>
|
||||
<select
|
||||
id="size"
|
||||
value={selectedSize}
|
||||
onChange={handleSizeChange}
|
||||
className="custom-select mt-1 block "
|
||||
>
|
||||
<option value="s">s</option>
|
||||
<option value="m">m</option>
|
||||
<option value="l">l</option>
|
||||
<option value="xl">xl</option>
|
||||
<option value="xxl">xxl</option>
|
||||
</select>
|
||||
</div>
|
||||
<p className="text-xl mb-4 text-gray-700">selected size: {selectedSize}</p> {/* Display selected size */}
|
||||
<button className="mt-4 py-2 px-4">
|
||||
continue to checkout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default StandardMeasurements;
|
||||
@ -47,7 +47,7 @@ const EmployeeSidebar = () => {
|
||||
<Link to="/customers" className={classNames.iconLink}>
|
||||
<img src={AddCustomerIcon} alt="Add Customer" className={classNames.icon} />
|
||||
</Link>
|
||||
<Link to="/employee/orders" className={classNames.iconLink}>
|
||||
<Link to="/setmeasurements" className={classNames.iconLink}>
|
||||
<img src={OrdersIcon} alt="Orders" className={classNames.icon} />
|
||||
</Link>
|
||||
<Link to="/employee/profile" className={classNames.iconLink}>
|
||||
|
||||
24
src/styles/Measurements.css
Normal file
24
src/styles/Measurements.css
Normal file
@ -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 */
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user