347 lines
11 KiB
JavaScript
347 lines
11 KiB
JavaScript
import * as React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import Tabs from '@mui/material/Tabs';
|
|
import Tab from '@mui/material/Tab';
|
|
import Typography from '@mui/material/Typography';
|
|
import Box from '@mui/material/Box';
|
|
import Switch from '@mui/material/Switch';
|
|
import useMediaQuery from '@mui/material/useMediaQuery';
|
|
import { useTheme } from '@mui/material/styles';
|
|
import { Phone, MessageSquare, Shield, Bell, UserCheck, ChevronLeft } from 'lucide-react';
|
|
|
|
function TabPanel(props) {
|
|
const { children, value, index, ...other } = props;
|
|
|
|
return (
|
|
<div
|
|
role="tabpanel"
|
|
hidden={value !== index}
|
|
id={`tabpanel-${index}`}
|
|
aria-labelledby={`tab-${index}`}
|
|
{...other}
|
|
style={{ width: '100%' }}
|
|
>
|
|
{value === index && (
|
|
<Box sx={{ p: 0 }}>
|
|
{children}
|
|
</Box>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
TabPanel.propTypes = {
|
|
children: PropTypes.node,
|
|
index: PropTypes.number.isRequired,
|
|
value: PropTypes.number.isRequired,
|
|
};
|
|
|
|
function a11yProps(index, isMobile) {
|
|
return {
|
|
id: `${isMobile ? 'horizontal' : 'vertical'}-tab-${index}`,
|
|
'aria-controls': `${isMobile ? 'horizontal' : 'vertical'}-tabpanel-${index}`,
|
|
};
|
|
}
|
|
|
|
const SettingItem = ({ title, description, enabled, onToggle }) => (
|
|
<Box sx={{ py: 2, borderBottom: '1px solid #e5e7eb', '&:last-child': { borderBottom: 'none' } }}>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }}>
|
|
<Typography variant="body1" sx={{ fontWeight: 'bold', color: '#111827', fontSize: { xs: '0.875rem', sm: '1rem' } }}>
|
|
{title}
|
|
</Typography>
|
|
<Switch
|
|
checked={enabled}
|
|
onChange={onToggle}
|
|
sx={{
|
|
'& .MuiSwitch-switchBase.Mui-checked': {
|
|
color: '#fff',
|
|
},
|
|
'& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
|
|
backgroundColor: '#16a34a',
|
|
},
|
|
}}
|
|
/>
|
|
</Box>
|
|
<Typography variant="body2" sx={{ color: '#6b7280', lineHeight: 1.6, fontSize: { xs: '0.75rem', sm: '0.875rem' } }}>
|
|
{description}
|
|
</Typography>
|
|
</Box>
|
|
);
|
|
|
|
const TabContent = ({ title, settings, states, onToggle }) => (
|
|
<Box sx={{borderRadius:"10px", flex: 1, bgcolor: '#ebf7ff', height: { xs: 'auto', md: '100vh' }, overflow: 'auto', width:"100%", maxWidth:"600px", margin:"0 auto" }}>
|
|
<Box sx={{
|
|
position: 'sticky',
|
|
top: 0,
|
|
bgcolor: '#034E08',
|
|
borderBottom: '1px solid #e5e7eb',
|
|
px: { xs: 2, sm: 3 },
|
|
py: 2,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 2,
|
|
zIndex: 10,
|
|
borderRadius:"10px",
|
|
}}>
|
|
<Typography variant="h6" sx={{ fontWeight: 'bold', color: '#fefefeff', fontSize: { xs: '1rem', sm: '1.25rem' } }}>
|
|
{title}
|
|
</Typography>
|
|
</Box>
|
|
<Box sx={{ px: { xs: 2, sm: 3 }, py: 2 }}>
|
|
{settings.map((setting, index) => (
|
|
<SettingItem
|
|
key={index}
|
|
title={setting.title}
|
|
description={setting.description}
|
|
enabled={states[setting.key]}
|
|
onToggle={() => onToggle(setting.key)}
|
|
/>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
|
|
export default function AccountSettingPage() {
|
|
const theme = useTheme();
|
|
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
|
|
const [value, setValue] = React.useState(0);
|
|
const [settings, setSettings] = React.useState({
|
|
phoneVisibility: true,
|
|
chatAlertsNotification: true,
|
|
chatProtection: true,
|
|
protectProfilePhoto: true,
|
|
callProtection: true,
|
|
matchAlerts: true,
|
|
profileViews: false,
|
|
messagePermission: true,
|
|
blockUnverified: false,
|
|
});
|
|
|
|
const handleChange = (event, newValue) => {
|
|
setValue(newValue);
|
|
};
|
|
|
|
const toggleSetting = (key) => {
|
|
setSettings(prev => ({ ...prev, [key]: !prev[key] }));
|
|
};
|
|
|
|
const tabs = [
|
|
{
|
|
id: 0,
|
|
label: 'Phone Number',
|
|
fullLabel: 'Phone Number Visibility Controls',
|
|
icon: <Phone size={20} />,
|
|
settings: [
|
|
{
|
|
key: 'phoneVisibility',
|
|
title: 'Phone Number Visibility',
|
|
description: 'You can control phone number visibility through temporary and permanent methods on your phone. For a single call, dial *67 before the number.',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: 1,
|
|
label: 'Chat Alerts',
|
|
fullLabel: 'Chat Alerts',
|
|
icon: <MessageSquare size={20} />,
|
|
settings: [
|
|
{
|
|
key: 'chatAlertsNotification',
|
|
title: 'Chat Alerts Notification',
|
|
description: 'Matrimony sites send chat alerts with standard, automated content to notify you of new interactions related to your profile.',
|
|
},
|
|
{
|
|
key: 'chatProtection',
|
|
title: 'Chat Protection',
|
|
description: 'To protect yourself while using matrimonial sites, the primary "chat protection content" is restricting the personal and sensitive information you share both on your public profile and in early conversations.',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: 2,
|
|
label: 'Profile',
|
|
fullLabel: 'Profile Protection',
|
|
icon: <Shield size={20} />,
|
|
settings: [
|
|
{
|
|
key: 'protectProfilePhoto',
|
|
title: 'Protect Profile photo to all',
|
|
description: 'The photograph privacy settings options are available in the \'My Photos\' section of the \'My Profile\' page.',
|
|
},
|
|
{
|
|
key: 'callProtection',
|
|
title: 'Call Protection',
|
|
description: 'To implement call protection, most major matrimony sites offer built-in privacy features that allow you to control who sees your contact details and photos.',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: 3,
|
|
label: 'Match Alerts',
|
|
fullLabel: 'Match Alerts Preferences',
|
|
icon: <Bell size={20} />,
|
|
settings: [
|
|
{
|
|
key: 'matchAlerts',
|
|
title: 'Match Alert Notifications',
|
|
description: 'Receive notifications when new profiles match your preferences and requirements.',
|
|
},
|
|
{
|
|
key: 'profileViews',
|
|
title: 'Profile View Alerts',
|
|
description: 'Get notified when someone views your profile or shows interest in connecting with you.',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: 4,
|
|
label: 'Messages',
|
|
fullLabel: 'Who Can Message Me?',
|
|
icon: <UserCheck size={20} />,
|
|
settings: [
|
|
{
|
|
key: 'messagePermission',
|
|
title: 'Message Permissions',
|
|
description: 'Control who can send you messages. You can restrict messages to only verified profiles or profiles that match your preferences.',
|
|
},
|
|
{
|
|
key: 'blockUnverified',
|
|
title: 'Block Unverified Profiles',
|
|
description: 'Automatically block messages from profiles that haven\'t completed verification process.',
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
return (
|
|
<Box sx={{ flexGrow: 1,
|
|
display: 'flex', flexDirection: { xs: 'column', md: 'row' }, gap:"20px",
|
|
minHeight: '90vh', marginTop:"50px", marginBottom:"50px" }}>
|
|
{/* Desktop: Vertical Sidebar */}
|
|
{!isMobile && (
|
|
<Box sx={{ width: 300, borderRadius:"10px" ,background:"#ffeac9", borderRight: '1px solid #e5e7eb', display: { xs: 'none', md: 'block' } }}>
|
|
<Box sx={{
|
|
position: 'sticky',
|
|
top: 0,
|
|
bgcolor: '#ffeac9',
|
|
borderBottom: '1px solid #e5e7eb',
|
|
px: 3,
|
|
py: 2,
|
|
zIndex: 10,
|
|
borderRadius:"10px" ,
|
|
}}>
|
|
<Typography variant="h5" sx={{ fontWeight: 'bold', color: '#111827' }}>
|
|
Settings
|
|
</Typography>
|
|
</Box>
|
|
<Tabs
|
|
orientation="vertical"
|
|
variant="scrollable"
|
|
value={value}
|
|
onChange={handleChange}
|
|
aria-label="Settings tabs"
|
|
sx={{
|
|
'& .MuiTabs-indicator': {
|
|
left: 0,
|
|
width: 4,
|
|
backgroundColor: '#A70710',
|
|
},
|
|
'& .MuiTab-root': {
|
|
// alignItems: 'flex-start',
|
|
// textAlign: 'left',
|
|
justifyContent:"left",
|
|
minHeight: 64,
|
|
px: 3,
|
|
py: 2,
|
|
textTransform: 'none',
|
|
fontSize: '0.875rem',
|
|
fontWeight: 500,
|
|
color: '#374151',
|
|
'&.Mui-selected': {
|
|
color: '#A70710',
|
|
backgroundColor: '#fff7ed',
|
|
},
|
|
'&:hover': {
|
|
backgroundColor: '#f9fafb',
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
{tabs.map((tab, index) => (
|
|
<Tab
|
|
key={tab.id}
|
|
icon={tab.icon}
|
|
iconPosition="start"
|
|
label={tab.fullLabel}
|
|
{...a11yProps(index, false)}
|
|
/>
|
|
))}
|
|
</Tabs>
|
|
</Box>
|
|
)}
|
|
|
|
{/* Mobile: Horizontal Tabs */}
|
|
{isMobile && (
|
|
<Box sx={{ bgcolor: 'white', borderBottom: '1px solid #e5e7eb', display: { xs: 'block', md: 'none' } }}>
|
|
<Box sx={{ px: 2, py: 2 }}>
|
|
<Typography variant="h6" sx={{ fontWeight: 'bold', color: '#111827' }}>
|
|
Settings
|
|
</Typography>
|
|
</Box>
|
|
<Tabs
|
|
value={value}
|
|
onChange={handleChange}
|
|
variant="scrollable"
|
|
scrollButtons="auto"
|
|
aria-label="Settings tabs"
|
|
sx={{
|
|
'& .MuiTabs-indicator': {
|
|
backgroundColor: '#A70710',
|
|
height: 3,
|
|
},
|
|
'& .MuiTab-root': {
|
|
textTransform: 'none',
|
|
fontSize: '0.75rem',
|
|
fontWeight: 500,
|
|
minWidth: 'auto',
|
|
px: 2,
|
|
py: 1.5,
|
|
color: '#ffffffff',
|
|
'&.Mui-selected': {
|
|
color: '#A70710',
|
|
},
|
|
},
|
|
'& .MuiTabs-flexContainer': {
|
|
gap: 1,
|
|
},
|
|
}}
|
|
>
|
|
{tabs.map((tab, index) => (
|
|
<Tab
|
|
key={tab.id}
|
|
icon={tab.icon}
|
|
iconPosition="start"
|
|
label={tab.label}
|
|
{...a11yProps(index, true)}
|
|
/>
|
|
))}
|
|
</Tabs>
|
|
</Box>
|
|
)}
|
|
|
|
{/* Tab Content */}
|
|
<Box sx={{ flex: 1, width: '100%' }}>
|
|
{tabs.map((tab, index) => (
|
|
<TabPanel key={tab.id} value={value} index={index}>
|
|
<TabContent
|
|
title={tab.fullLabel}
|
|
settings={tab.settings}
|
|
states={settings}
|
|
onToggle={toggleSetting}
|
|
/>
|
|
</TabPanel>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
} |