نسخ من RaghadAlkhous/RestaurantDash
126 أسطر
3.4 KiB
JavaScript
126 أسطر
3.4 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Box, Stack ,useTheme} from '@mui/material';
|
|
import Side from './Side';
|
|
import EmailInputSection from './EmailInputSection';
|
|
import OtpVerification from './OtpVerification';
|
|
import NewPassword from './NewPassword';
|
|
import Congratulations from './Congratulations';
|
|
|
|
|
|
|
|
const ForgetForm = () => {
|
|
const [emailOrPhone, setEmailOrPhone] = useState('');
|
|
const [currentSlide, setCurrentSlide] = useState(0);
|
|
const theme = useTheme();
|
|
const slides = [
|
|
{ component: EmailInputSection, title: "Email Verification" },
|
|
{ component: OtpVerification, title: "OTP Verification" },
|
|
{ component: NewPassword, title: "New Password" },
|
|
{ component: Congratulations, title: "Congratulations" }
|
|
];
|
|
|
|
const handleNext = () => {
|
|
if (currentSlide < slides.length - 1) {
|
|
setCurrentSlide(prev => prev + 1);
|
|
}
|
|
};
|
|
|
|
const handleBack = () => {
|
|
if (currentSlide > 0) {
|
|
setCurrentSlide(prev => prev - 1);
|
|
}
|
|
};
|
|
|
|
const CurrentComponent = slides[currentSlide].component;
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: { xs: 'column', sm: 'row' },
|
|
minHeight: '100vh',
|
|
backgroundColor: '#fff',
|
|
|
|
}}
|
|
>
|
|
{/* ✅ Sidebar يظهر فقط من sm+ */}
|
|
<Box sx={{ width: { sm: '40%', xs: '0%' }, display: { xs: 'none', sm: 'block' } }}>
|
|
<Side currentStepIndex={currentSlide} onNext={handleNext} onBack={handleBack} />
|
|
</Box>
|
|
|
|
{/* ✅ Form */}
|
|
<Box
|
|
sx={{
|
|
width: { sm: '60%' },
|
|
minHeight: { xs: '100vh', sm: '130vh', md: '90vh' },
|
|
position: 'relative',
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'flex-start',
|
|
paddingTop: { xs: 2, sm: 4 },
|
|
paddingLeft: { xs: 2, sm: 4 },
|
|
backgroundColor: '#fff',
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
width: '100%',
|
|
maxWidth: 686,
|
|
pr: { xs: 3, sm: 2, md: 1 },
|
|
pt: { xs: 2, sm: 4, md: 1 },
|
|
}}
|
|
>
|
|
<Stack spacing={2} alignItems="flex-start">
|
|
|
|
|
|
{/* إظهار المكون الحالي فقط */}
|
|
<CurrentComponent
|
|
emailOrPhone={emailOrPhone}
|
|
setEmailOrPhone={setEmailOrPhone}
|
|
/>
|
|
|
|
|
|
</Stack>
|
|
</Box>
|
|
|
|
{/* ✅ مؤشر الشرائح السفلي */}
|
|
<Box
|
|
sx={{
|
|
position: { xs: 'absolute', sm: 'absolute' },
|
|
bottom: { xs: '5%', sm: '-1%', md: '2%' },
|
|
left: '50%',
|
|
transform: 'translateX(-50%)',
|
|
display: 'flex',
|
|
gap: 1,
|
|
width: '80%',
|
|
maxWidth: 600,
|
|
justifyContent: 'center',
|
|
height: {
|
|
xs: 3,
|
|
sm: 5,
|
|
md: 6,
|
|
},
|
|
}}
|
|
>
|
|
{slides.map((_, index) => (
|
|
<Box
|
|
key={index}
|
|
sx={{
|
|
width: '100vh',
|
|
height: 5,
|
|
bgcolor: index === currentSlide ? theme.palette.primary.main : 'rgba(0, 0, 0, 0.2)',
|
|
borderRadius: 2,
|
|
cursor: 'pointer',
|
|
transition: 'background-color 0.3s',
|
|
}}
|
|
// onClick={() => setCurrentSlide(index)} // يمكنك تفعيلها لاحقًا
|
|
/>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default ForgetForm;
|