import React from 'react';
import { Global } from '@emotion/react';
import { Inspector } from 'react-dev-inspector';
import type { InspectParams } from 'react-dev-inspector';
import { Title } from './components/Title';
import { Slogan } from './components/Slogan';
import { KeyPad, Keypress } from './components/Keypress';
import * as S from './styles';
const projectRepo = 'https://github.com/zthxxx/react-dev-inspector';
const isDev = process.env.NODE_ENV === 'development';
export const HomePage = () => {
  return <Inspector data-inspector-line="16" data-inspector-column="4" data-inspector-relative-path="layouts/index.tsx" disableLaunchEditor={!isDev} onClickElement={(inspect: InspectParams) => {
    console.debug(inspect);
    if (isDev || !inspect.codeInfo?.relativePath) return;
    const {
      relativePath,
      lineNumber
    } = inspect.codeInfo;
    window.open(`${projectRepo}/blob/master/examples/umi3/${relativePath}#L${lineNumber}`);
  }}>
      <Global data-inspector-line="32" data-inspector-column="6" data-inspector-relative-path="layouts/index.tsx" styles={S.globalCss} />


      <S.Base data-inspector-line="35" data-inspector-column="6" data-inspector-relative-path="layouts/index.tsx">
        <S.GithubCorner data-inspector-line="36" data-inspector-column="8" data-inspector-relative-path="layouts/index.tsx" href={projectRepo} />

        <Title data-inspector-line="40" data-inspector-column="8" data-inspector-relative-path="layouts/index.tsx">
          <span data-inspector-line="41" data-inspector-column="10" data-inspector-relative-path="layouts/index.tsx">React Dev Inspector</span>
        </Title>

        <Slogan data-inspector-line="44" data-inspector-column="8" data-inspector-relative-path="layouts/index.tsx">
          <p data-inspector-line="45" data-inspector-column="10" data-inspector-relative-path="layouts/index.tsx">Quick jump to local IDE source code directly from browser React component by just a simple click!</p>
          <p data-inspector-line="46" data-inspector-column="10" data-inspector-relative-path="layouts/index.tsx"><small data-inspector-line="46" data-inspector-column="13" data-inspector-relative-path="layouts/index.tsx">( for this prod online demo page, jump to GitHub file )</small></p>
        </Slogan>

        <KeyPad data-inspector-line="49" data-inspector-column="8" data-inspector-relative-path="layouts/index.tsx">
          <Keypress data-inspector-line="50" data-inspector-column="10" data-inspector-relative-path="layouts/index.tsx">Ctrl ⌃</Keypress>
          +
          <Keypress data-inspector-line="52" data-inspector-column="10" data-inspector-relative-path="layouts/index.tsx">Shift ⇧</Keypress>
          +
          <Keypress data-inspector-line="54" data-inspector-column="10" data-inspector-relative-path="layouts/index.tsx">Command ⌘</Keypress>
          +
          <Keypress data-inspector-line="56" data-inspector-column="10" data-inspector-relative-path="layouts/index.tsx">C</Keypress>
        </KeyPad>
      </S.Base>
    </Inspector>;
};
export default HomePage;