import React, { useState } from 'react';
import {
Box,
Typography,
TextField,
Button,
styled,
useTheme
} from '@mui/material';
import AddAPhotoOutlinedIcon from '@mui/icons-material/AddAPhotoOutlined';
const AccountSettings = () => {
const theme = useTheme();
const [profileImage, setProfileImage] = useState(null);
const [fullName, setFullName] = useState('');
const [username, setUsername] = useState('');
const [bio, setBio] = useState('');
const [email, setEmail] = useState('');
const [phone, setPhone] = useState('');
const handleImageUpload = (event) => {
if (event.target.files && event.target.files[0]) {
setProfileImage(URL.createObjectURL(event.target.files[0]));
}
};
const Input = styled('input')({
display: 'none',
});
const customInputStyle = {
'& 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)',
},
};
const renderField = (label, value, onChange, type = 'text') => (
{label}
);
return (
{/* العنوان الرئيسي */}
Account Setting
{/* صورة الملف الشخصي */}
Your Profile Picture
{/* الحقول النصية */}
Personal Information
{/* السطر الأول: Full Name + Email */}
{renderField('Full Name', fullName, (e) => setFullName(e.target.value))}
{renderField('Email', email, (e) => setEmail(e.target.value), 'email')}
{/* السطر الثاني: Username + Phone Number */}
{renderField('Username', username, (e) => setUsername(e.target.value))}
{renderField('Phone Number', phone, (e) => setPhone(e.target.value), 'tel')}
{/* الحقل Bio منفصل */}
Bio
setBio(e.target.value)}
fullWidth
multiline
rows={3}
sx={customInputStyle}
/>
{/* الأزرار */}
);
};
export default AccountSettings;