/
index.tsx
109 lines (99 loc) · 2.23 KB
/
index.tsx
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
/** @module Components.Doc.Dashboard */
import { useCallback } from 'react'
import { Tabs, Typography } from 'antd'
import { useRouter } from 'next/router'
import { asyncFunctionExec } from '@/components/utils/asyncFunction'
import Workspace from './workspace'
import Account from './account'
import Organizations from './organizations'
import Administration from './administration'
import Editor from './editor'
import Help from './help'
import style from '../index.module.css'
/**
* Tabs
*/
const tabs = [
{
key: 'workspaces',
label: 'Workspaces & Projects',
children: <Workspace />
},
{
key: 'account',
label: 'Account Settings',
children: <Account />
},
{
key: 'organizations',
label: 'Organizations',
children: <Organizations />
},
{
key: 'administration',
label: 'Administration',
children: <Administration />
},
{
key: 'editor',
label: 'Model Editor',
children: <Editor />
},
{
key: 'Help',
label: 'Help',
children: <Help />
}
]
/**
* Dashboard
* @returns Dashboard
*/
const Dashboard: React.FunctionComponent = () => {
// Data
const router = useRouter()
const query = router.query
/**
* On change
* @param key Key
*/
const onChange = useCallback(
(key: string): void => {
asyncFunctionExec(async () => {
await router.push({
pathname: '/doc',
query: {
section: 'dashboard',
tab: key
}
})
})
},
[router]
)
/**
* Render
*/
return (
<>
<Typography.Title level={3}>Dashboard</Typography.Title>
<Typography className={style.text}>
<Typography.Text>
The dashboard is the main place where you can manage your workspaces
and projects, your account, your organizations and get help. There is
an access to the model editor too.
</Typography.Text>
<Typography.Text>
If you are an administrator, you have equally access to administration
tools.
</Typography.Text>
</Typography>
<Tabs
defaultActiveKey={(query.tab as string) ?? 'workspaces'}
items={tabs}
onChange={onChange}
/>
</>
)
}
export default Dashboard