1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
import { ReactNode, Children } from 'react';
import Icon from '@mdi/react';
import { NavBar } from '../components/navbar';
import { CenteredPage, PageTitle } from '../components/page';
import { Vierkant, IconLabelButton } from '../components/ui';
import { AccountAvatar } from '../components/account';
import RecentGames from '../components/recentGames';
import PersonAddOutlinedIcon from '@material-ui/icons/PersonAddOutlined';
import AssignmentIndOutlinedIcon from '@material-ui/icons/AssignmentIndOutlined';
import ArrowDownwardOutlinedIcon from '@material-ui/icons/ArrowDownwardOutlined';
import ArrowUpwardOutlinedIcon from '@material-ui/icons/ArrowUpwardOutlined';
import PeopleOutlineOutlinedIcon from '@material-ui/icons/PeopleOutlineOutlined';
import {
mdiAccountCancelOutline,
mdiEqual,
mdiCheckboxBlankCircle,
mdiClipboardTextOutline,
mdiGamepadSquareOutline,
mdiEarth } from '@mdi/js';
function InfoModule(props: {
label: string;
icon: ReactNode;
}) {
return <div style={{
position: "relative",
height: "100%"
}}>
<div style={{
position: "absolute",
left: "50%",
transform: "translateX(-50%)"
}}>{props.icon}</div>
<div style={{
position: "absolute",
top: 24 + 6,
left: 0, right: 0, bottom: 0,
}}>
<span style={{
position: "absolute",
top: "50%",
transform: "translateY(-50%)",
width: "100%",
textAlign: "center"
}}>{props.label}</span>
</div>
</div>
}
function InfoSection(props: { children: ReactNode }) {
return <Vierkant fullwidth>
<div style={{
display: "grid",
gridTemplateColumns: `repeat(${Children.count(props.children)}, 1fr)`,
gridGap: 12,
height: 64
}}>
{props.children}
</div>
</Vierkant>
}
export default function AccountPage() {
return <div>
<NavBar/>
<CenteredPage width={802}>
<PageTitle>Profiel</PageTitle>
<Vierkant fullwidth>
<AccountAvatar size={128} dummy/>
<div style={{
display: "inline-block",
verticalAlign: "top",
marginLeft: 12,
width: "calc(100% - 128px - 12px)"
}}>
<h2 style={{ fontSize: 32 }}>Gebruikersnaam</h2>
<p style={{ marginTop: 6 }}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
</p>
</div>
<div style={{
position: "absolute",
backgroundColor: "var(--background)",
height: "40px",
bottom: 24, left: 24 + 12 + 128, right: 24
}}>
<IconLabelButton icon={<PersonAddOutlinedIcon/>} text="Vriendschapsverzoek"/>
<IconLabelButton icon={<Icon size={1} path={mdiAccountCancelOutline}/>} text="Blokkeren"/>
</div>
</Vierkant>
<InfoSection>
<InfoModule icon={<Icon size={1} path={mdiCheckboxBlankCircle} color="var(--disk-b-text)"/>} label="Online"/>
<InfoModule icon={<AssignmentIndOutlinedIcon/>} label="Lid sinds 14 december 2020"/>
<InfoModule icon={<PeopleOutlineOutlinedIcon/>} label="2 vrienden"/>
<InfoModule icon={<Icon size={1} path={mdiEarth}/>} label="Nederland"/>
</InfoSection>
<InfoSection>
<InfoModule icon={<ArrowUpwardOutlinedIcon style={{ color: "var(--disk-b-text)" }}/>} label="4 keer gewonnen"/>
<InfoModule icon={<Icon size={1} path={mdiEqual}/>} label="2 keer gelijkspel"/>
<InfoModule icon={<ArrowDownwardOutlinedIcon style={{ color: "var(--disk-a-text)" }}/>} label="2 keer verloren"/>
<InfoModule icon={<Icon size={1} path={mdiClipboardTextOutline}/>} label="Score: 400"/>
<InfoModule icon={<Icon size={1} path={mdiGamepadSquareOutline}/>} label="6 potjes"/>
</InfoSection>
<Vierkant>
<RecentGames/>
</Vierkant>
</CenteredPage>
</div>
}
|