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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
|
import {
AddHome,
AutoAwesome,
Cloud,
GitHub,
InstallMobile,
Storage,
} from '@mui/icons-material'
import { Box, Button, Card, Grid, styled, Typography } from '@mui/joy'
import { useNavigate } from 'react-router-dom'
const IconContainer = styled('div')({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: '50%',
minWidth: '60px',
height: '60px',
marginRight: '16px',
})
const ButtonContainer = styled('div')({
display: 'flex',
justifyContent: 'center',
marginTop: 'auto',
})
function StartOptionCard({ icon: Icon, title, description, button, index }) {
return (
<Card
variant='plain'
sx={{
p: 2,
display: 'flex',
minHeight: '300px',
py: 4,
flexDirection: 'column',
justifyContent: 'space-between',
}}
data-aos-delay={100 * index}
data-aos-anchor='[data-aos-id-getting-started-container]'
data-aos='fade-up'
>
{/* Changes are within this div */}
<Box
sx={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
}}
>
<IconContainer>{Icon}</IconContainer>
<Typography level='h4' textAlign={'center'}>
{title}
</Typography>
</Box>
<Typography level='body-md' color='neutral' lineHeight={1.6}>
{description}
</Typography>
<ButtonContainer>{button}</ButtonContainer>
</Card>
)
}
const GettingStarted = () => {
const navigate = useNavigate()
const information = [
{
title: 'Donetick Web',
icon: <Cloud style={{ fontSize: '48px' }} />,
description:
'The easiest way! just create account and start using DoneTick',
button: (
<Button
size='lg'
fullWidth
startDecorator={<AutoAwesome />}
onClick={() => {
navigate('/my/chores')
}}
>
Start Now!
</Button>
),
},
{
title: 'Selfhosted',
icon: <Storage style={{ fontSize: '48px' }} />,
description: 'Download the binary and manage your own DoneTick instance',
button: (
<Button
size='lg'
fullWidth
startDecorator={<GitHub />}
onClick={() => {
window.open(
'https://github.com/donetick/donetick/releases',
'_blank',
)
}}
>
Github Releases
</Button>
),
},
{
title: 'Hassio Addon',
icon: <AddHome style={{ fontSize: '48px' }} />,
description:
'have Home Assistant? install DoneTick as a Home Assistant Addon with single click',
button: (
<Button
size='lg'
fullWidth
startDecorator={<InstallMobile />}
onClick={() => {
window.open(
'https://my.home-assistant.io/redirect/supervisor_add_addon_repository/?repository_url=https%3A%2F%2Fgithub.com%2Fdonetick%2Fhassio-addons',
)
}}
>
Add Addon
</Button>
),
},
]
return (
<Box
sx={{
alignContent: 'center',
textAlign: 'center',
display: 'flex',
flexDirection: 'column',
mt: 2,
}}
>
<Typography level='h4' mt={2} mb={4}>
Getting Started
</Typography>
<Box maxWidth={'lg'} sx={{ mb: 8 }}>
<Typography level='body-md' color='neutral'>
you can start using DoneTick in multiple ways, easiest way is to use
Donetick Web and you can start in seconds, or if you are into
selfhosting you can download the binary and run it on your own server,
or if you are using Home Assistant you can install DoneTick as a Home
Assistant Addon
</Typography>
<div data-aos-id-getting-started-container>
<Grid container spacing={4} mt={4}>
{information.map((info, index) => (
<Grid item xs={12} md={4} key={index}>
<StartOptionCard
icon={info.icon}
title={info.title}
description={info.description}
button={info.button}
/>
</Grid>
))}
</Grid>
</div>
</Box>
</Box>
)
}
export default GettingStarted
|
