-
Notifications
You must be signed in to change notification settings - Fork 18
/
ApiKeyCard.tsx
86 lines (80 loc) · 1.9 KB
/
ApiKeyCard.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
import React from "react"
import { AccessKey } from "@chainsafe/files-api-client"
import { makeStyles, createStyles } from "@chainsafe/common-theme"
import { CSGTheme } from "../../Themes/types"
import { Button, Typography, Paper } from "@chainsafe/common-components"
import { Trans } from "@lingui/macro"
import dayjs from "dayjs"
const useStyles = makeStyles(({ constants }: CSGTheme) =>
createStyles({
root: {
position: "relative",
margin: constants.generalUnit,
borderRadius: constants.generalUnit / 2,
maxWidth: 250,
padding: `${constants.generalUnit * 2}px ${constants.generalUnit}px`
},
button: {
marginTop: constants.generalUnit * 2
}
})
)
interface IApiKeyCard {
apiKey: AccessKey
deleteKey: () => void
}
const ApiKeyCard = ({ apiKey, deleteKey }: IApiKeyCard) => {
const classes = useStyles()
return (
<Paper className={classes.root}>
<Typography variant="h4"
component="h4">
<Trans>
Id:
</Trans>
</Typography>
<Typography
variant="body1"
component="p"
>
{ apiKey.id }
</Typography>
<Typography variant="h4"
component="h4">
<Trans>
Status:
</Trans>
</Typography>
<Typography
variant="body1"
component="p">
{ apiKey.status }
</Typography>
<Typography
variant="h4"
component="h4"
>
<Trans>
Created on:
</Trans>
</Typography>
<Typography
variant="body1"
component="p"
>
{ dayjs(apiKey.created_at).format("DD MMM YYYY h:mm a") }
</Typography>
<Button
className={classes.button}
variant="secondary"
fullsize={true}
onClick={deleteKey}
>
<Trans>
Delete key
</Trans>
</Button>
</Paper>
)
}
export default ApiKeyCard