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 { Avatar, Card, Container, Flex, Grid, Group, Image, Stack, Text, TextInput, Title } from '@mantine/core'
import { getUserData } from '../../../utils/auth'
const Profile = () => {
let { username } = getUserData()
return (
<Stack>
<Flex gap="md" sx={{ display: 'flex' }} bg='gray' w="750px" p="30px">
<Image withPlaceholder width="180px" height="180px" />
<Flex gap="md" sx={{ display: 'flex', backgroundColor: '#272623', borderRadius: '5px' }} bg='gray' w="100%" p="30px">
<Avatar size={180} color='lime' variant='gradient' gradient={{ from: 'blue', to: 'green', deg: 100 }}>
<Text sx={{ fontSize: '120px' }}>
{username[0].toUpperCase()}
</Text>
</Avatar>
<div>
<Title>username</Title>
<Title>{username}</Title>
<Group position='left'>
<Text>full name</Text>
<Text>{'-------'}</Text>
<Text>city</Text>
</Group>
</div>
</Flex>
<Flex gap="md" sx={{ display: 'flex' }} bg='gray' w="750px" p="30px">
<Image withPlaceholder width="180px" height="180px" />
<div>
<Title>username</Title>
<Group position='left'>
<Text>full name</Text>
<Text>city</Text>
</Group>
</div>
<Flex gap="md" sx={{ display: 'flex', backgroundColor: '#272623', borderRadius: '5px', textAlign: 'left' }} bg='gray' w="100%" p="30px">
<Grid w='100%' gutter={30} columns={12}>
<Grid.Col span={6}>
<TextInput label='Username' />
</Grid.Col>
<Grid.Col span={6}>
<TextInput label='Email address' />
</Grid.Col>
<Grid.Col span={6}>
<TextInput label='First Name' />
</Grid.Col>
<Grid.Col span={6}>
<TextInput label='Last Name' />
</Grid.Col>
</Grid>
</Flex>
</Stack>
)