aheh/ChessHub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changed: Profile component in Settings

Browse Source
This commit is contained in:
Moon Patel
2023-07-12 18:52:12 +05:30
parent ceecac85dd
commit 86041aef9d
1 changed files with 26 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Settings/Profile.jsx
+26 -14
View File
@@ -1,28 +1,40 @@
import { Card, Container, Flex, Group, Image, Stack, Text, Title } from '@mantine/core'
import React from 'react' import React from 'react'
import { Avatar, Card, Container, Flex, Grid, Group, Image, Stack, Text, TextInput, Title } from '@mantine/core'
import { getUserData } from '../../../utils/auth'
const Profile = () => { const Profile = () => {
let { username } = getUserData()
return ( return (
<Stack> <Stack>
<Flex gap="md" sx={{ display: 'flex' }} bg='gray' w="750px" p="30px"> <Flex gap="md" sx={{ display: 'flex', backgroundColor: '#272623', borderRadius: '5px' }} bg='gray' w="100%" p="30px">
<Image withPlaceholder width="180px" height="180px" /> <Avatar size={180} color='lime' variant='gradient' gradient={{ from: 'blue', to: 'green', deg: 100 }}>
<Text sx={{ fontSize: '120px' }}>
{username[0].toUpperCase()}
</Text>
</Avatar>
<div> <div>
<Title>username</Title> <Title>{username}</Title>
<Group position='left'> <Group position='left'>
<Text>full name</Text> <Text>{'-------'}</Text>
<Text>city</Text> <Text>city</Text>
</Group> </Group>
</div> </div>
</Flex> </Flex>
<Flex gap="md" sx={{ display: 'flex' }} bg='gray' w="750px" p="30px"> <Flex gap="md" sx={{ display: 'flex', backgroundColor: '#272623', borderRadius: '5px', textAlign: 'left' }} bg='gray' w="100%" p="30px">
<Image withPlaceholder width="180px" height="180px" /> <Grid w='100%' gutter={30} columns={12}>
<div> <Grid.Col span={6}>
<Title>username</Title> <TextInput label='Username' />
<Group position='left'> </Grid.Col>
<Text>full name</Text> <Grid.Col span={6}>
<Text>city</Text> <TextInput label='Email address' />
</Group> </Grid.Col>
</div> <Grid.Col span={6}>
<TextInput label='First Name' />
</Grid.Col>
<Grid.Col span={6}>
<TextInput label='Last Name' />
</Grid.Col>
</Grid>
</Flex> </Flex>
</Stack> </Stack>
) )