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
|
import { useSelector } from "react-redux";
import { RootStore } from "../redux/store";
import React, { useState } from 'react';
const Onboarding = () => {
const [counter, setCounter] = useState(0);
const handleClick = () => {
setCounter(counter + 1);
}
const vscMediaUrl = useSelector(
(state: RootStore) => state.config.vscMediaUrl
);
return (
<div style={{position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', backgroundColor: '#1E1E1E', zIndex: 200 }} onClick={handleClick}>
{counter === 0 && (
<div style={{display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: '100%'}}>
<h1>Welcome to Continue!</h1>
<img src={`${vscMediaUrl}/intro.gif`} alt="Intro" />
</div>
)}
{counter === 1 && (
<div style={{display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: '100%'}}>
<h1>Answer coding questions</h1>
<img src={`${vscMediaUrl}/explain.gif`} alt="Explain" />
<p style={{ fontSize: '16px', paddingLeft: '50px', paddingRight: '50px', textAlign: 'center' }}>Ask Continue about a part of your code to get another perspective</p>
</div>
)}
{counter === 2 && (
<div style={{display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: '100%'}}>
<h1>Edit in natural language</h1>
<img src={`${vscMediaUrl}/edit.gif`} alt="Edit" />
<p style={{ fontSize: '16px', paddingLeft: '50px', paddingRight: '50px', textAlign: 'center' }}>Highlight a section of code and instruct Continue to refactor it</p>
</div>
)}
{counter === 3 && (
<div style={{display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: '100%'}}>
<h1>Generate files from scratch</h1>
<img src={`${vscMediaUrl}/generate.gif`} alt="Generate" />
<p style={{ fontSize: '16px', paddingLeft: '50px', paddingRight: '50px', textAlign: 'center' }}>Let Continue build the scaffolding of Python scripts, React components, and more</p>
</div>
)}
<p style={{ paddingLeft: '50px', paddingRight: '50px', paddingBottom: '50px', textAlign: 'center' }}>Click to learn how to use Continue...</p>
</div>
);
}
export default Onboarding;
|
