
<% if (classComponent) { %>
import React, { Component } from 'react';
<% } else { %>
import React from 'react';
<% } %>

import { ReactComponent as Logo } from './logo.svg';
import star from './star.svg';

<% if (classComponent) { %>
export class App extends Component {
  render() {
<% } else { %>
export function App() {
<% } %>
  return (
    <div className="app">
      <style jsx>{`
        .app {
          font-family: sans-serif;
          min-width: 300px;
          max-width: 600px;
          margin: 50px auto;
        }

        .gutter-left {
          margin-left: 9px;
        }

        .col-span-2 {
          grid-column: span 2;
        }

        .flex {
          display: flex;
          align-items: center;
          justify-content: center;
        }

        header {
          background-color: #143055;
          color: white;
          padding: 5px;
          border-radius: 3px;
        }

        main {
          padding: 0 36px;
        }

        p {
          text-align: center;
        }

        h1 {
          text-align: center;
          margin-left: 18px;
          font-size: 24px;
        }

        h2 {
          text-align: center;
          font-size: 20px;
          margin: 40px 0 10px 0;
        }

        .resources {
          text-align: center;
          list-style: none;
          padding: 0;
          display: grid;
          grid-gap: 9px;
          grid-template-columns: 1fr 1fr;
        }

        .resource {
          color: #0094ba;
          height: 36px;
          background-color: rgba(0, 0, 0, 0);
          border: 1px solid rgba(0, 0, 0, 0.12);
          border-radius: 4px;
          padding: 3px 9px;
          text-decoration: none;
        }

        .resource:hover {
          background-color: rgba(68, 138, 255, 0.04);
        }

        pre {
          padding: 9px;
          border-radius: 4px;
          background-color: black;
          color: #eee;
        }

        details {
          border-radius: 4px;
          color: #333;
          background-color: rgba(0, 0, 0, 0);
          border: 1px solid rgba(0, 0, 0, 0.12);
          padding: 3px 9px;
          margin-bottom: 9px;
        }

        summary {
          outline: none;
          height: 36px;
          line-height: 36px;
        }

        .github-star-container {
          margin-top: 12px;
          line-height: 20px;
        }

        .github-star-container a {
          display: flex;
          align-items: center;
          text-decoration: none;
          color: #333;
        }

        .github-star-badge {
          color: #24292e;
          display: flex;
          align-items: center;
          font-size: 12px;
          padding: 3px 10px;
          border: 1px solid rgba(27, 31, 35, 0.2);
          border-radius: 3px;
          background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
          margin-left: 4px;
          font-weight: 600;
        }

        .github-star-badge:hover {
          background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%);
          border-color: rgba(27, 31, 35, 0.35);
          background-position: -0.5em;
        }
        .github-star-badge .material-icons {
          height: 16px;
          width: 16px;
          margin-right: 4px;
        }
      `}</style>

      <header className="flex">
        <Logo width="75" height="75" />
        <h1>Welcome to <%= name %>!</h1>
      </header>
      <main>
        <h2>Resources &amp; Tools</h2>
        <p>Thank you for using and showing some ♥ for Nx.</p>
        <div className="flex github-star-container">
          <a
            href="https://github.com/nrwl/nx"
            target="_blank"
            rel="noopener noreferrer"
          >
            {' '}
            If you like Nx, please give it a star:
            <div className="github-star-badge">
              <img src={star} className="material-icons" alt="" />
              Star
            </div>
          </a>
        </div>
        <p>Here are some links to help you get started.</p>
        <ul className="resources">
      <li className="col-span-2">
        <a
          className="resource flex"
          href="https://egghead.io/playlists/scale-react-development-with-nx-4038"
        >
          Scale React Development with Nx (Course)
        </a>
      </li>
      <li className="col-span-2">
        <a
          className="resource flex"
          href="https://nx.dev/latest/react/tutorial/01-create-application"
        >
          Interactive tutorial
        </a>
      </li>
      <li className="col-span-2">
        <a className="resource flex" href="https://nx.app/">
          <svg width="36" height="36" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M120 15V30C103.44 30 90 43.44 90 60C90 76.56 76.56 90 60 90C43.44 90 30 103.44 30 120H15C6.72 120 0 113.28 0 105V15C0 6.72 6.72 0 15 0H105C113.28 0 120 6.72 120 15Z" fill="#0E2039"/>
            <path d="M120 30V105C120 113.28 113.28 120 105 120H30C30 103.44 43.44 90 60 90C76.56 90 90 76.56 90 60C90 43.44 103.44 30 120 30Z" fill="white"/>
          </svg>
          <span className="gutter-left">Nx Cloud</span>
        </a>
      </li>
        </ul>
        <h2>Next Steps</h2>
        <p>Here are some things you can do with Nx.</p>
        <details open>
          <summary>Add UI library</summary>
          <pre>{`# Generate UI lib
nx g @nrwl/react:lib ui

# Add a component
nx g @nrwl/react:component xyz --project ui`}</pre>
        </details>
        <details>
          <summary>View dependency graph</summary>
          <pre>{`nx dep-graph`}</pre>
        </details>
        <details>
          <summary>Run affected commands</summary>
          <pre>{`# see what's been affected by changes
nx affected:dep-graph

# run tests for current changes
nx affected:test

# run e2e tests for current changes
nx affected:e2e
  `}</pre>
        </details>
      </main>
    </div>
  );

<% if (classComponent) { %>
  }
}
<% } else { %>
}
<% } %>

export default App;
