@ -1,5 +1,5 @@
import { Box , Typography , Container , Avatar , Paper , Grid , Button } from '@mui/material' ;
import { Box , Typography , Container , Avatar , Paper , Button } from '@mui/material' ;
import { Settings , Edit } from '@mui/icons-material' ;
import { Edit } from '@mui/icons-material' ;
const AccountPage = ( ) = > {
const AccountPage = ( ) = > {
return (
return (
@ -9,8 +9,8 @@ const AccountPage = () => {
My Account
My Account
< / Typography >
< / Typography >
< Grid container spacing = { 3 } >
< Box sx = { { display : 'flex' , flexDirection : { xs : 'column' , md : 'row' } , gap : 3 } } >
< Grid item xs = { 12 } md = { 4 } >
< Box sx = { { flex : { xs : 1 , md : '0 0 33%' } } } >
< Paper sx = { { p : 3 , textAlign : 'center' } } >
< Paper sx = { { p : 3 , textAlign : 'center' } } >
< Avatar
< Avatar
sx = { { width : 120 , height : 120 , mx : 'auto' , mb : 2 } }
sx = { { width : 120 , height : 120 , mx : 'auto' , mb : 2 } }
@ -29,9 +29,9 @@ const AccountPage = () => {
Edit Profile
Edit Profile
< / Button >
< / Button >
< / Paper >
< / Paper >
< / Grid >
< / Box >
< Grid item xs = { 12 } md = { 8 } >
< Box sx = { { flex : 1 } } >
< Paper sx = { { p : 3 } } >
< Paper sx = { { p : 3 } } >
< Typography variant = "h6" sx = { { mb : 2 } } >
< Typography variant = "h6" sx = { { mb : 2 } } >
Account Settings
Account Settings
@ -40,8 +40,8 @@ const AccountPage = () => {
Manage your account preferences and settings .
Manage your account preferences and settings .
< / Typography >
< / Typography >
< / Paper >
< / Paper >
< / Grid >
< / Box >
< / Grid >
< / Box >
< / Box >
< / Box >
< / Container >
< / Container >
) ;
) ;