نسخ من RaghadAlkhous/RestaurantDash
Work on Host Kitchen
هذا الالتزام موجود في:
raghad
260
src/components/Home/HostKitchen/contcet/Facilitation.js
Normal file
260
src/components/Home/HostKitchen/contcet/Facilitation.js
Normal file
@@ -0,0 +1,260 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
Box, Typography, Stack, Button, useTheme, TextField, Radio,
|
||||
RadioGroup,
|
||||
FormControlLabel,
|
||||
} from '@mui/material';
|
||||
|
||||
const Facilitation = ({ currentStepIndex = 0, onNext, onBack }) => {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
height: { xs: '90%', sm: '100%', md: '92.5%' },
|
||||
backgroundColor: '#FFFFFF',
|
||||
px: 4,
|
||||
pt: 5,
|
||||
pb: 5.8,
|
||||
display: 'block',
|
||||
borderRadius: 2,
|
||||
boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
|
||||
position: 'relative',
|
||||
width: { xs: '85%', sm: '90%' },
|
||||
}}
|
||||
>
|
||||
<Stack spacing={2.5}>
|
||||
<Typography
|
||||
fontWeight={700}
|
||||
sx={{
|
||||
fontSize: {
|
||||
xs: '1.8rem',
|
||||
sm: '2rem',
|
||||
md: '2.2rem'
|
||||
}
|
||||
}}
|
||||
>
|
||||
Facilitation & Cooperation
|
||||
</Typography>
|
||||
<Box sx={{ width: '80%' }}>
|
||||
<Typography
|
||||
fontSize="16px"
|
||||
color="text.secondary"
|
||||
fontWeight={500}
|
||||
sx={{ pb: 1 }}
|
||||
>
|
||||
Enter your basic information to proceed to registration of your own restaurant on this platform
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
|
||||
<Box>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ fontWeight: 500, fontSize: '16px', mb: 1, color: '#191635' }}
|
||||
>
|
||||
Additional Services Provided
|
||||
</Typography>
|
||||
<RadioGroup row name="additionalFacilities">
|
||||
<FormControlLabel
|
||||
value="yes"
|
||||
control={
|
||||
<Radio
|
||||
sx={{
|
||||
color: 'rgba(150, 155, 167, 0.6)', // شفافية اللون
|
||||
transform: 'scale(0.85)', // تقليل حجم الزر لتقليل "سُمك الحواف"
|
||||
'&.Mui-checked': {
|
||||
color: theme.palette.primary.main
|
||||
}
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label="Yes"
|
||||
/>
|
||||
<FormControlLabel
|
||||
value="no"
|
||||
control={
|
||||
<Radio
|
||||
sx={{
|
||||
color: 'rgba(150, 155, 167, 0.6)',
|
||||
transform: 'scale(0.85)',
|
||||
'&.Mui-checked': {
|
||||
color: theme.palette.primary.main
|
||||
}
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label="No"
|
||||
/>
|
||||
</RadioGroup>
|
||||
|
||||
</Box>
|
||||
|
||||
{/* Additional Services Input */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 500, fontSize: '16px' }}>
|
||||
Additional Services
|
||||
</Typography>
|
||||
<TextField
|
||||
placeholder={`1. Marketing\n2. Logistics\n3. Staff Training`}
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
multiline
|
||||
minRows={4}
|
||||
sx={{
|
||||
'& .MuiInputBase-root': {
|
||||
fontWeight: 500,
|
||||
fontSize: '15px',
|
||||
alignItems: 'start',
|
||||
},
|
||||
'& textarea::placeholder': {
|
||||
color: '#969BA7',
|
||||
whiteSpace: 'pre-line', // لعرض الأسطر بشكل صحيح
|
||||
},
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: '10px',
|
||||
transition: '0.3s',
|
||||
'&.Mui-focused fieldset': {
|
||||
borderColor: theme.palette.primary.main,
|
||||
boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)',
|
||||
},
|
||||
},
|
||||
'& .MuiOutlinedInput-root.Mui-focused': {
|
||||
borderColor: '#3f51b5',
|
||||
boxShadow: '0 0 0 2px rgba(63,81,181,0.1)',
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
|
||||
</Box>
|
||||
|
||||
<Box sx={{}}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ fontWeight: 500, fontSize: '16px', mb: 1, color: '#191635' }}
|
||||
>
|
||||
Ventilation and Cooling System
|
||||
</Typography>
|
||||
<RadioGroup row name="additionalFacilities">
|
||||
<FormControlLabel
|
||||
value="yes"
|
||||
control={
|
||||
<Radio
|
||||
sx={{
|
||||
color: 'rgba(150, 155, 167, 0.6)', // شفافية اللون
|
||||
transform: 'scale(0.85)', // تقليل حجم الزر لتقليل "سُمك الحواف"
|
||||
'&.Mui-checked': {
|
||||
color: theme.palette.primary.main
|
||||
}
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label="Yes"
|
||||
/>
|
||||
<FormControlLabel
|
||||
value="no"
|
||||
control={
|
||||
<Radio
|
||||
sx={{
|
||||
color: 'rgba(150, 155, 167, 0.6)',
|
||||
transform: 'scale(0.85)',
|
||||
'&.Mui-checked': {
|
||||
color: theme.palette.primary.main
|
||||
}
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label="No"
|
||||
/>
|
||||
</RadioGroup>
|
||||
|
||||
</Box>
|
||||
|
||||
{/* Inputs (Restaurant Name, Type, Address, City, Postal Code) */}
|
||||
{[
|
||||
{ label: 'Working Hours', placeholder: '8 hours' },
|
||||
].map((field, index) => (
|
||||
<Box key={index} sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
|
||||
{field.label}
|
||||
</Typography>
|
||||
<TextField
|
||||
placeholder={field.placeholder}
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
sx={{
|
||||
'& input': { fontWeight: 500, fontSize: '15px' },
|
||||
'& input::placeholder': { color: '#969BA7' },
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: '10px',
|
||||
transition: '0.3s',
|
||||
'&.Mui-focused fieldset': {
|
||||
borderColor: theme.palette.primary.main,
|
||||
boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
|
||||
}
|
||||
},
|
||||
'& .MuiOutlinedInput-root.Mui-focused': {
|
||||
borderColor: '#3f51b5',
|
||||
boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
))}
|
||||
|
||||
|
||||
<Box sx={{ pt: 1 }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth
|
||||
onClick={onNext}
|
||||
sx={{
|
||||
fontFamily: 'PlusJakartaSans',
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: '14px', sm: '16px' },
|
||||
height: { xs: '45px', sm: '52px' },
|
||||
borderRadius: '50px',
|
||||
textTransform: 'none',
|
||||
color: 'white',
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.primary.hover,
|
||||
},
|
||||
}}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
|
||||
{/* زر Back تحت زر Next */}
|
||||
<Button
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
onClick={onBack}
|
||||
sx={{
|
||||
mt: 2,
|
||||
fontFamily: 'PlusJakartaSans',
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: '14px', sm: '16px' },
|
||||
height: { xs: '45px', sm: '52px' },
|
||||
borderRadius: '50px',
|
||||
textTransform: 'none',
|
||||
display: { xs: 'block', sm: 'none', md: 'none' }, // يظهر فقط في xs و sm
|
||||
borderColor: theme.palette.primary.main,
|
||||
color: theme.palette.primary.main,
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.primary.light,
|
||||
borderColor: theme.palette.primary.main,
|
||||
},
|
||||
}}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Facilitation;
|
||||
المرجع في مشكلة جديدة
حظر مستخدم