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 ( ); }; export default Onboarding;