نسخ من RaghadAlkhous/RestaurantDash
update the dashbord and router
هذا الالتزام موجود في:
raghad
187
src/components/Authentication/ForgetPassword/Side.js
Normal file
187
src/components/Authentication/ForgetPassword/Side.js
Normal file
@@ -0,0 +1,187 @@
|
||||
import React from 'react';
|
||||
import { Box, Typography, Stack, Button ,useTheme } from '@mui/material';
|
||||
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
|
||||
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
|
||||
|
||||
const steps = [
|
||||
{
|
||||
title: 'Forget Password',
|
||||
description: 'Provide an email to change your password',
|
||||
icon: '/images/icons/key.png',
|
||||
},
|
||||
{
|
||||
title: 'Verify your email',
|
||||
description: 'Enter your otp verification',
|
||||
icon: '/images/icons/email.png',
|
||||
},
|
||||
{
|
||||
title: 'Create a new password',
|
||||
description: 'Create your a new password',
|
||||
icon: '/images/icons/pen.png',
|
||||
},
|
||||
{
|
||||
title: 'Welcome to KitchPlus app',
|
||||
description: 'Get up and running in 3 minutes',
|
||||
icon: '/images/icons/rocket.png',
|
||||
},
|
||||
];
|
||||
|
||||
const Side = ({ currentStepIndex, onNext, onBack }) => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
height: { xs: '100vh', sm: '130vh', md: '87.5vh' },
|
||||
backgroundColor: '#FAFAFA',
|
||||
px: { xs: 2, sm: 4 },
|
||||
py: 5,
|
||||
display: { xs: 'none', sm: 'block' },
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" fontWeight={700} mb={2}>
|
||||
Step for change your password
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" mb={4}>
|
||||
Instructions for secure password modification. Follow simple steps for password change.
|
||||
</Typography>
|
||||
|
||||
<Stack spacing={6} position="relative" sx={{ ml: 3 }}>
|
||||
{steps.map((step, index) => (
|
||||
<Box key={index} display="flex" alignItems="flex-start" gap={2} position="relative">
|
||||
{index !== steps.length - 1 && (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
left: '3.8vh',
|
||||
top: '6vh',
|
||||
width: '2px',
|
||||
height: 'calc(100% + 24px)',
|
||||
backgroundColor: '#e0e0e0',
|
||||
zIndex: 0,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
width: 50,
|
||||
height: 53,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
width: 60,
|
||||
height: 63,
|
||||
borderRadius: '50%',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
zIndex: 0,
|
||||
backgroundImage:
|
||||
index === currentStepIndex
|
||||
? 'linear-gradient(0deg, #FF914D, #F3F3F3 )'
|
||||
: 'none',
|
||||
backgroundColor: index === currentStepIndex ? 'transparent' : '#F3F3F3',
|
||||
}}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
width: 50,
|
||||
height: 53,
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderRadius: '50%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={step.icon}
|
||||
alt={step.title}
|
||||
style={{ width: 24, height: 24, objectFit: 'contain' }}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography variant="subtitle1" sx={{ fontSize: '16px', fontWeight: 600 }}>
|
||||
{step.title}
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ color: '#A0A0A0', fontSize: '12px', fontWeight: 500 }}>
|
||||
{step.description}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Stack>
|
||||
|
||||
{/* ... (بقية محتوى الـ Side كما هو بدون تغيير) ... */}
|
||||
|
||||
{/* أزرار التنقل */}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
bottom: 2,
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
width: '90%',
|
||||
maxWidth: 600,
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
px: 2,
|
||||
}}
|
||||
>
|
||||
|
||||
{/* Back */}
|
||||
<Button
|
||||
variant="text"
|
||||
startIcon={<ArrowBackIosIcon sx={{ fontSize: '16px' }} />}
|
||||
onClick={onBack}
|
||||
disabled={currentStepIndex === 0}
|
||||
sx={{
|
||||
color: currentStepIndex === 0 ? '#C2C2C2' : '#6B7283',
|
||||
minWidth: '100px',
|
||||
fontWeight: 400,
|
||||
fontSize: '16px',
|
||||
textTransform: 'none',
|
||||
'&:hover': {
|
||||
backgroundColor: 'transparent',
|
||||
color: theme.palette.primary.main
|
||||
}
|
||||
}}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
{/* Next */}
|
||||
<Button
|
||||
variant="text"
|
||||
endIcon={<ArrowForwardIosIcon sx={{ fontSize: '16px' }} />}
|
||||
onClick={onNext}
|
||||
disabled={currentStepIndex === steps.length - 1}
|
||||
sx={{
|
||||
color: currentStepIndex === steps.length - 1 ? '#C2C2C2' : '#6B7283',
|
||||
minWidth: '100px',
|
||||
fontWeight: 400,
|
||||
fontSize: '16px',
|
||||
textTransform: 'none',
|
||||
'&:hover': {
|
||||
backgroundColor: 'transparent',
|
||||
color: theme.palette.primary.main,
|
||||
transition: 'all 0.4s ease'
|
||||
}
|
||||
}}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Side;
|
||||
المرجع في مشكلة جديدة
حظر مستخدم