adding onboarding

1 files changed, 51 insertions, 0 deletions

diff --git a/extension/react-app/src/components/Onboarding.tsx b/extension/react-app/src/components/Onboarding.tsx
new file mode 100644
index 00000000..373f7bea
--- /dev/null
+++ b/extension/react-app/src/components/Onboarding.tsx
@@ -0,0 +1,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;