/** @jsx jsx */ import { jsx } from "theme-ui" import { Heading, Text, CheckboxFieldBlock, Button } from "gatsby-interface" import { MdArrowForward } from "react-icons/md" import { useCallback, FormEvent } from "react" import { useConfig } from "../../util/use-config" export interface IProps { onGoNext: () => void } export function OnboardingIntro({ onGoNext }: IProps): JSX.Element { const onSubmit: React.FocusEventHandler<HTMLFormElement> = (e) => { e.preventDefault() onGoNext() } const [optedIn = false, setOptedIn] = useConfig(`telemetryOptIn`) console.log({ optedIn }) const onToggle = useCallback( (e: FormEvent<HTMLInputElement>): void => { setOptedIn(e.currentTarget.checked) }, [setOptedIn] ) return ( <div sx={{ maxWidth: `62rem`, }} > <Heading sx={{ fontFamily: `sans`, fontSize: 9, fontWeight: `extraBold`, lineHeight: `dense`, letterSpacing: `-0.02em`, color: `grey.90`, marginBottom: 10, }} > <span sx={{ display: `block`, color: `grey.60`, fontWeight: `normal`, fontSize: 1, lineHeight: `dense`, }} > Welcome to </span> Gatsby Desktop </Heading> <form onSubmit={onSubmit}> <Text sx={{ maxWidth: `20rem`, mt: 0, mb: 7 }}> Would you like to help us improve Gatsby Desktop by periodically submitting anonymous usage information? </Text> <CheckboxFieldBlock id="anonUsage" name="anonUsage" label="Yes, help improve Gatsby Desktop" onChange={onToggle} checked={optedIn} /> <Button type="submit" rightIcon={<MdArrowForward />} size="L" sx={{ mt: 8 }} > Get started </Button> </form> </div> ) }