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
|
import React, { useState, useEffect } from "react";
import styled from "styled-components";
import { ArrowLeftIcon, ArrowRightIcon } from "@heroicons/react/24/outline";
import { defaultBorderRadius } from ".";
import Loader from "./Loader";
const StyledDiv = styled.div`
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #1e1e1e;
z-index: 200;
color: white;
`;
const StyledSpan = styled.span`
padding: 8px;
border-radius: ${defaultBorderRadius};
&:hover {
background-color: #ffffff33;
}
white-space: nowrap;
`;
const Onboarding = () => {
const [counter, setCounter] = useState(4);
const gifs = ["intro", "highlight", "question", "help"];
const topMessages = [
"Welcome!",
"Highlight code",
"Ask a question",
"Use /help to learn more",
];
useEffect(() => {
const hasVisited = localStorage.getItem("hasVisited");
if (hasVisited) {
setCounter(4);
} else {
setCounter(0);
localStorage.setItem("hasVisited", "true");
}
}, []);
const [loading, setLoading] = useState(true);
useEffect(() => {
setLoading(true);
}, [counter]);
return (
<StyledDiv hidden={counter >= 4}>
<div
style={{
display: "grid",
justifyContent: "center",
alignItems: "center",
height: "100%",
textAlign: "center",
paddingLeft: "16px",
paddingRight: "16px",
}}
>
<h1>{topMessages[counter]}</h1>
<div style={{ display: "flex", justifyContent: "center" }}>
{loading && (
<div style={{ margin: "auto", position: "absolute", zIndex: 0 }}>
<Loader />
</div>
)}
{counter % 2 === 0 ? (
<img
src={`https://github.com/continuedev/continue/blob/main/media/${gifs[counter]}.gif?raw=true`}
width="100%"
key={"even-gif"}
alt={topMessages[counter]}
onLoad={() => {
setLoading(false);
}}
style={{ zIndex: 1 }}
/>
) : (
<img
src={`https://github.com/continuedev/continue/blob/main/media/${gifs[counter]}.gif?raw=true`}
width="100%"
key={"odd-gif"}
alt={topMessages[counter]}
onLoad={() => {
setLoading(false);
}}
style={{ zIndex: 1 }}
/>
)}
</div>
<p
style={{
paddingLeft: "50px",
paddingRight: "50px",
paddingBottom: "50px",
textAlign: "center",
cursor: "pointer",
whiteSpace: "nowrap",
}}
>
<StyledSpan
hidden={counter === 0}
onClick={() => setCounter((prev) => Math.max(prev - 1, 0))}
>
<ArrowLeftIcon width="18px" strokeWidth="2px" /> Previous
</StyledSpan>
<span hidden={counter === 0}>{" | "}</span>
<StyledSpan onClick={() => setCounter((prev) => prev + 1)}>
{counter === 0
? "Click to learn how to use Continue"
: counter === 3
? "Get Started"
: "Next"}{" "}
<ArrowRightIcon width="18px" strokeWidth="2px" />
</StyledSpan>
</p>
</div>
</StyledDiv>
);
};
export default Onboarding;
|
