@fortawesome/free-solid-svg-icons#faCode TypeScript Examples

MarkButton = ({ format, icon }: { format: string; icon: string }) => {
  const editor = useSlate();
  let thisIcon = faBold;
  if (icon === "italic") {
    thisIcon = faItalic;
  } else if (icon === "underlined") {
    thisIcon = faUnderline;
  } else if (icon === "code") {
    thisIcon = faCode;
  }
  return (
    <Button
      active={isMarkActive(editor, format)}
      onMouseDown={(event: any) => {
        event.preventDefault();
        toggleMark(editor, format);
      }}
    >
      <FontAwesomeIcon icon={thisIcon} />
    </Button>
  );
}

MarkButton = ({ format, icon }: { format: string; icon: string }) => {
  const editor = useSlate();
  let thisIcon = faBold;
  if (icon === "italic") {
    thisIcon = faItalic;
  } else if (icon === "underlined") {
    thisIcon = faUnderline;
  } else if (icon === "code") {
    thisIcon = faCode;
  }
  return (
    <Button
      active={isMarkActive(editor, format)}
      onMouseDown={(event: any) => {
        event.preventDefault();
        toggleMark(editor, format);
      }}
    >
      <FontAwesomeIcon icon={thisIcon} />
    </Button>
  );
}

function Tab(props: ITapProps) {
  const content = props.items.map((v, i) => (
    <button key={i} onClick={() => props.onTabClick(i)} className={cls(props.curIndex === i && style.active)}>
      <FontAwesomeIcon icon={faCode}/>
      {'  ' + v}
    </button>
  ));


  return (
    <div className={style.tab}>
      {content}
    </div>
  );
}

menus = [
  {
    icon: <FontAwesomeIcon icon={faMagic}/>,
    path: Routers.MAIN
  },
  {
    icon: <FontAwesomeIcon icon={faEdit}/>,
    path: Routers.WEBGL_EDITOR
  },
  {
    icon: <FontAwesomeIcon icon={faCode}/>,
    path: Routers.DSL_CODE_EDITOR
  },
  {
    icon: <FontAwesomeIcon icon={faImage}/>,
    path: ""
  }
]

public constructor(private _matIconRegistry: MatIconRegistry, private _sanitizer: DomSanitizer) {
    this.addSvg(faAngleDoubleDown);
    this.addSvg(faArrowUp);
    this.addSvg(faArrowDown);
    this.addSvg(faSyncAlt);
    this.addSvg(faTimes);
    this.addSvg(faExternalLinkAlt);
    this.addSvg(faQuestionCircle);
    this.addSvg(faPlay);
    this.addSvg(faClock);
    this.addSvg(faBug);
    this.addSvg(faLink);
    this.addSvg(faDiscord);
    this.addSvg(faGithub);
    this.addSvg(faInfoCircle);
    this.addSvg(faCodeBranch);
    this.addSvg(faCaretDown);
    this.addSvg(faExclamationTriangle);
    this.addSvg(faCode);
    this.addSvg(faPatreon);
    this.addSvg(faCoins);
    this.addSvg(faCompressArrowsAlt);
    this.addSvg(faPencilAlt);
    this.addSvg(faCheckCircle);
    this.addSvg(faDiceD6);
    this.addSvg(faSearch);
    this.addSvg(faInfoCircle);
    this.addSvg(faNewspaper);
    this.addSvg(faCog);
    this.addSvg(faAngleUp);
    this.addSvg(faAngleDown);
    this.addSvg(faChevronRight);
    this.addSvg(faUserCircle);
    this.addSvg(faEllipsisV);
    this.addSvg(faCopy);
    this.addSvg(farCheckCircle);
    this.addSvg(faExclamation);
    this.addSvg(faTrash);
    this.addSvg(faHistory);
    this.addSvg(faCaretSquareRight);
    this.addSvg(faCaretSquareLeft);
    this.addSvg(faMinimize);
    this.addSvg(faUpRightFromSquare);
  }

function NoSubmissionsYet() {
  const [help, setHelp] = useState<'code' | 'lessons' | 'exercises'>(null);

  return (
    <PageContainer className={styles['no-submissions-yet']}>
      <h1> Vreau să ajut</h1>
      <h2>
        Ne bucuram ca-ti place ideea si ca vrei sa te implici. Uite cele 3 moduri prin care o poti 
        face acum:
      </h2>
      <div className={`${styles['help-wrapper']} d-flex  justify-content-between align-items-center`}>
        <Button
          onClick={() => setHelp('code')}
          className={`${help === 'code' ? 'btn--blue ' : 'btn--transparent '} btn align-items-center`}
        >
          <FontAwesomeIcon height="24" width="32" className="mr-2" icon={faCode} />
          Vreau să codez
          la platformă
        </Button>

        <Button
          onClick={() => setHelp('lessons')}
          className={`${help === 'lessons' ? 'btn--blue ' : 'btn--transparent '}btn align-items-center`}
        >
          <FontAwesomeIcon height="24" width="32" className="mr-2" icon={faPen} />
          Vreau să scriu lecții
        </Button>

        <Link href="/exercitii/creeaza">
          <a className={`${help === 'exercises' ? 'btn--blue ' : 'btn--transparent '}btn align-items-center`}>
            <FontAwesomeIcon height="24" width="32" className="mr-2" icon={faLightbulb} />
            Vreau să creez exerciții
          </a>
        </Link>
      </div>
      {help && (
        <div className={styles['help-explanation']}>
          {help === 'code' && (
            <>
              <h3> Codează la platformă </h3>
              <p>
                Tot codul este
                {' '}
                <a href={GITHUB_URL} target="_blank" rel="noreferrer">open-source pe GitHub</a>
                ,
                deci cel mai ușor mod de a începe este pornind de la secțiunea
                {' '}
                <a href={`${GITHUB_URL}/issues`} target="_blank" rel="noreferrer">issues</a>
                .
              </p>
              <p>
                Dacă nu avem
                {' '}
                <em>pending-issues</em>
                {' '}
                sau dacă ai vreo idee de funcționalitate
                mai mare, dă-ne un semn și hai s-o facem realitate! ?
              </p>
            </>
          )}

          {help === 'lessons' && (
            <>
              <h3> Scrie lecții </h3>
              <p>
                Aruncă un ochi
                {' '}
                <Link href="/lectii">
                  <a>
                    aici
                  </a>
                </Link>
                {' '}
                pentru a vedea toate lecțiile scrise deja, cât și cele pe care
                ne dorim să le scriem dar n-am apucat încă.
              </p>
              <p>
                Dar nu trebuie să te rezumi doar la ce e acolo. Dacă ai idei de subiecte pe care noi
                nu le-am menționat, cu atât mai bine. Dă-ne un semn și să trecem la treabă! ?
              </p>
            </>
          )}
          {help === 'exercises' && (
            <>
              <h3> Creează exerciții </h3>
              <p>
                La finalul fiecărei lecții găsești o serie de exerciții specifice pentru
                acel capitol. Dacă ai idei de exerciții mai interesante/utile,
                așteptăm submisii noi împreună cu soluțiile lor.
              </p>
            </>
          )}
        </div>
      )}
    </PageContainer>
  );
}

function CodeExample(props: Props) {
  const {
    Root,
    styles,
    children,
    javascriptCodePromise,
    typescriptCodePromise,
  } = useStyles(props, 'section');
  const theme = useTheme();
  const [codeExampleOpen, setCodeExampleOpen] = useState(false);
  const [codeType, setCodeType] = useState<'typescript' | 'javascript'>(
    'typescript',
  );

  const [typescriptCode, setTypescriptCode] = useState('Loading…');
  const [javascriptCode, setJavascriptCode] = useState('Loading…');

  const code = codeType === 'typescript' ? typescriptCode : javascriptCode;

  useEffect(() => {
    javascriptCodePromise.then((mod: any) => setJavascriptCode(mod.default));
  }, [javascriptCodePromise]);

  useEffect(() => {
    typescriptCodePromise.then((mod: any) => setTypescriptCode(mod.default));
  }, [typescriptCodePromise]);

  const handleCopy = () => {
    alert('Code copied to clipboard!');
  };

  const codeSandboxUrl = useMemo(() => {
    const parameters = getParameters({
      files: {
        [`Example.${codeType === 'typescript' ? 'tsx' : 'js'}`]: {
          content: code,
          isBinary: false,
        },
        [`index.${codeType === 'typescript' ? 'tsx' : 'js'}`]: {
          content: stripIndent`
            import React from 'react';
            import { render } from 'react-dom';
            import { ThemeProvider } from 'hacker-ui';
            import Example from './Example';
            import theme from './theme';
            import 'normalize.css';
            import './index.css';
            
            const container = document.createElement('div');
            container.style.position = 'fixed';
            container.style.top = '0';
            container.style.left = '0';
            container.style.bottom = '0';
            container.style.right = '0';
            container.style.width = '100vw';
            container.style.height = '100vh';
            container.style.padding = '16px';
            
            document.body.appendChild(container);
            
            function App() {
              return (
                <ThemeProvider theme={theme}>
                  <Example />
                </ThemeProvider>
              );
            }
            
            render(<App />, container);
          `,
          isBinary: false,
        },
        [`theme.${codeType === 'typescript' ? 'tsx' : 'js'}`]: {
          content: stripIndent`
            import { createTheme } from 'hacker-ui';

            const theme = createTheme({
              /* add your overrides here */
            });

            ${
              codeType === 'typescript'
                ? 'export type Theme = typeof theme;'
                : ''
            }
            
            export default theme;
          `,
          isBinary: false,
        },
        'package.json': {
          content: JSON.stringify(
            {
              name: 'react',
              version: '1.0.0',
              description: '',
              keywords: [],
              main: `src/index.${codeType === 'typescript' ? 'tsx' : 'js'}`,
              dependencies: {
                'hacker-ui': '0.0.0-88cd8a409',
                react: '16.12.0',
                'react-dom': '16.12.0',
                'react-scripts': '3.0.1',
                '@fortawesome/fontawesome-svg-core': '^1.2.26',
                '@fortawesome/free-brands-svg-icons': '^5.12.1',
                '@fortawesome/free-solid-svg-icons': '^5.12.0',
                '@fortawesome/react-fontawesome': '^0.1.8',
                'normalize.css': '^8.0.1',
              },
              devDependencies: {
                '@types/react': '16.9.19',
                '@types/react-dom': '16.9.5',
                typescript: '3.3.3',
              },
              scripts: {
                start: 'react-scripts start',
                build: 'react-scripts build',
                test: 'react-scripts test --env=jsdom',
                eject: 'react-scripts eject',
              },
              browserslist: [
                '>0.2%',
                'not dead',
                'not ie <= 11',
                'not op_mini all',
              ],
            },
            null,
            2,
          ),
          isBinary: false,
        },
        '.prettier.rc': {
          content: JSON.stringify(
            {
              printWidth: 80,
              singleQuote: true,
              trailingComma: 'all',
            },
            null,
            2,
          ),
          isBinary: false,
        },
        'index.css': {
          content: stripIndent`
            body {
              font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
                Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
            }
            
            :root {
              font-size: 16px;
            }
            
            * {
              box-sizing: border-box;
            }
          `,
          isBinary: false,
        },
        'augments.d.ts': {
          content: stripIndent`
            import {
              StyleFnArgs,
              ReactComponent,
              StyleProps,
              GetComponentProps,
            } from 'react-style-system';
            
            declare module 'react-style-system' {
              type Theme = typeof import('./theme').default;

              // provides an override type that includes the type for your theme
              export function useTheme(): Theme;
            
              // provides an override type that includes the type for your theme
              export function createStyles<Styles, ComponentType extends ReactComponent>(
                stylesFn: (args: StyleFnArgs<Theme>) => Styles,
              ): <Props extends StyleProps<Styles>>(
                props: Props,
                component?: ComponentType,
              ) => {
                Root: React.ComponentType<GetComponentProps<ComponentType>>;
                styles: { [P in keyof Styles]: string } & {
                  cssVariableObject: { [key: string]: string };
                };
              } & Omit<Props, keyof StyleProps<any>>;
            }
          `,
          isBinary: false,
        },
        ...(codeType === 'typescript'
          ? {
              'tsconfig.json': {
                content: JSON.stringify(
                  {
                    include: ['./src/*'],
                    compilerOptions: {
                      strict: true,
                      lib: ['dom', 'es2015'],
                      jsx: 'react',
                    },
                  },
                  null,
                  2,
                ),
                isBinary: false,
              },
            }
          : null),
      },
    });

    return `https://codesandbox.io/api/v1/sandboxes/define?parameters=${parameters}`;
  }, [code, codeType]);

  useEffect(() => {
    if (!codeExampleOpen) return;

    setTimeout(() => {
      const { Prism } = window as any;
      if (!Prism) return;
      Prism.highlightAll();
    }, 250);
  }, [codeExampleOpen, codeType]);

  return (
    <>
      <Root>
        <Tooltip title="Show code">
          {(props) => (
            <Button
              aria-label="Show code"
              shape="icon"
              className={styles.codeButton}
              color={theme.bland}
              onClick={() => setCodeExampleOpen(true)}
              {...props}
            >
              <FontAwesomeIcon icon={faCode} />
            </Button>
          )}
        </Tooltip>
        {children}
      </Root>

      <Modal
        style={styles.cssVariableObject}
        open={codeExampleOpen}
        onClose={() => setCodeExampleOpen(false)}
      >
        <ModalHeader className={styles.modalHeader}>
          <RadioGroup
            className={styles.modalButtons}
            value={codeType}
            onChange={(e) => setCodeType(e.currentTarget.value as any)}
          >
            <FormControl className={styles.choice}>
              <Radio className={styles.radio} value="typescript" />
              <Label>TypeScript</Label>
            </FormControl>

            <FormControl className={styles.choice}>
              <Radio className={styles.radio} value="javascript" />
              <Label>JavaScript</Label>
            </FormControl>
          </RadioGroup>
        </ModalHeader>

        <ModalContent>
          <div className={styles.floatingButtons}>
            <Tooltip title="Open in CodeSandbox">
              {(props) => (
                <Button
                  component="a"
                  // the props API for `Button` and `a` don't match so we
                  // use `@ts-ignore` to get around it for this issue
                  // @ts-ignore
                  href={codeSandboxUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  shape="icon"
                  color="white"
                  surface="black"
                  size="large"
                  variant="filled"
                  {...props}
                >
                  <CodeSandboxIcon />
                </Button>
              )}
            </Tooltip>

            <Tooltip title="Copy code">
              {(props) => (
                <CopyToClipBoard text={code} onCopy={handleCopy}>
                  <Button
                    shape="icon"
                    color="white"
                    surface="black"
                    size="large"
                    variant="filled"
                    {...props}
                  >
                    <FontAwesomeIcon icon={faCopy} size="lg" />
                  </Button>
                </CopyToClipBoard>
              )}
            </Tooltip>
          </div>

          <div className={styles.codeContainer}>
            <pre
              className={classNames(styles.code, {
                'language-tsx': codeType === 'typescript',
                'language-jsx': codeType === 'javascript',
              })}
            >
              <code>{code}</code>
            </pre>
          </div>
        </ModalContent>

        <ModalFooter>
          <ModalActions>
            <Button
              color={theme.bland}
              onClick={() => setCodeExampleOpen(false)}
            >
              Close
            </Button>
          </ModalActions>
        </ModalFooter>
      </Modal>
    </>
  );
}