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
|
import { useSelector } from "react-redux";
import { RootStore } from "../redux/store";
import React, { useState, useEffect } from "react";
import styled from "styled-components";
import { ArrowLeft, ArrowRight } from "@styled-icons/heroicons-outline";
import { defaultBorderRadius } from ".";
const StyledDiv = styled.div`
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #1e1e1e;
z-index: 200;
`;
const StyledSpan = styled.span`
padding: 8px;
border-radius: ${defaultBorderRadius};
&:hover {
background-color: #ffffff33;
}
`;
const Onboarding = () => {
const [counter, setCounter] = useState(4);
const gifs = ["intro", "explain", "edit", "generate"];
const topMessages = [
"Welcome to Continue!",
"Answer coding questions",
"Edit in natural language",
"Generate files from scratch",
];
const bottomMessages = [
"",
"Ask Continue about a part of your code to get another perspective",
"Highlight a section of code and instruct Continue to refactor it",
"Let Continue build the scaffolding of Python scripts, React components, and more",
];
const vscMediaUrl = useSelector(
(state: RootStore) => state.config.vscMediaUrl
);
useEffect(() => {
const hasVisited = localStorage.getItem("hasVisited");
if (hasVisited) {
setCounter(4);
} else {
setCounter(0);
localStorage.setItem("hasVisited", "true");
}
}, []);
return (
<StyledDiv hidden={counter >= 4}>
<div
style={{
display: "grid",
justifyContent: "center",
alignItems: "center",
height: "100%",
textAlign: "center",
background: `linear-gradient(
101.79deg,
#12887a66 0%,
#87245c66 32%,
#e1263766 63%,
#ffb21566 100%
)`,
paddingLeft: "16px",
paddingRight: "16px",
}}
>
<h1>{topMessages[counter]}</h1>
<div style={{ display: "flex", justifyContent: "center" }}>
<img
src={`${vscMediaUrl}/${gifs[counter]}.gif`}
alt={topMessages[counter]}
/>
</div>
<p>{bottomMessages[counter]}</p>
<p
style={{
paddingLeft: "50px",
paddingRight: "50px",
paddingBottom: "50px",
textAlign: "center",
}}
>
<div
style={{
cursor: "pointer",
}}
>
<StyledSpan
hidden={counter === 0}
onClick={() => setCounter((prev) => Math.max(prev - 1, 0))}
>
<ArrowLeft width="18px" strokeWidth="2px" /> Previous
</StyledSpan>
<span hidden={counter === 0}>{" | "}</span>
<StyledSpan onClick={() => setCounter((prev) => prev + 1)}>
Click to {counter === 3 || "learn how to"} use Continue{" "}
<ArrowRight width="18px" strokeWidth="2px" />
</StyledSpan>
</div>
</p>
</div>
</StyledDiv>
);
};
export default Onboarding;
|
