Fundamentos do next.js

ignews/.eslintrc.json

@@ -0,0 +1,8 @@
+{
+  "extends": "next/core-web-vitals",
+  "rules": {
+    // Other rules
+    "@next/next/no-img-element": "off",
+    "import/no-anonymous-default-export": "off"
+  }
+}

ignews/.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

ignews/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

ignews/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

ignews/next.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  reactStrictMode: true,
+}

ignews/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "ignews",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "12.0.7",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-icons": "^4.3.1",
+    "sass": "^1.45.0",
+    "stripe": "^8.193.0"
+  },
+  "devDependencies": {
+    "@types/node": "^16.11.13",
+    "@types/react": "^17.0.37",
+    "eslint": "8.4.1",
+    "eslint-config-next": "12.0.7",
+    "typescript": "^4.5.4"
+  }
+}

ignews/src/components/Header/index.tsx

@@ -0,0 +1,19 @@
+import { SignInButton } from "../SignInButton";
+import styles from "./styles.module.scss";
+
+export function Header() {
+  return (
+    <header className={styles.container}>
+      <div className={styles.content}>
+        <img src="/images/logo.svg" alt="logo" />
+        <nav>
+          <a href="#">Home</a>
+          <a href="#" className={styles.active}>
+            Posts
+          </a>
+        </nav>
+        <SignInButton />
+      </div>
+    </header>
+  );
+}

ignews/src/components/Header/styles.module.scss

@@ -0,0 +1,52 @@
+.container {
+  height: 5rem;
+  border-bottom: 1px solid var(--gray-700);
+}
+
+.content {
+  max-width: 1120px;
+  height: 5rem;
+  margin: 0 auto;
+  padding: 0 2rem;
+  display: flex;
+  align-items: center;
+
+  nav {
+    margin-left: 5rem;
+    height: 5rem;
+
+    a {
+      height: 5rem;
+      line-height: 5rem;
+      display: inline-block;
+      position: relative;
+      padding: 0 0.5rem;
+      color: var(--gray-300);
+
+      & + a {
+        margin-left: 2rem;
+      }
+
+      &:hover {
+        color: var(--white);
+      }
+      &.active {
+        color: var(--white);
+        font-weight: bold;
+      }
+      &.active::after {
+        content: "";
+        height: 3px;
+        width: 100%;
+        bottom: 1px;
+        left: 0;
+        position: absolute;
+        border-radius: 3px 3px 0 0;
+        background: var(--yellow-500);
+      }
+    }
+  }
+  button {
+    margin-left: auto;
+  }
+}

ignews/src/components/SignInButton/index.tsx

@@ -0,0 +1,19 @@
+import styles from "./styles.module.scss";
+import { FaGithub } from "react-icons/fa";
+import { FiX } from "react-icons/fi";
+
+export function SignInButton() {
+  const isLog = true;
+  return isLog ? (
+    <button type="button" className={styles.signInButton}>
+      <FaGithub color="#04d361" />
+      Hugo Alves Varella
+      <FiX color="#737380" className={styles.closeIcon} />
+    </button>
+  ) : (
+    <button type="button" className={styles.signInButton}>
+      <FaGithub color="#eba417" />
+      Sign in with Github
+    </button>
+  );
+}

ignews/src/components/SignInButton/styles.module.scss

@@ -0,0 +1,32 @@
+.signInButton {
+  height: 3rem;
+  border-radius: 3rem;
+  background: var(--gray-800);
+  border: 0;
+  padding: 0 1.5rem;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: filter 0.2s;
+
+  color: var(--white);
+  font-weight: bold;
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  svg:first-child {
+    margin-right: 1rem;
+  }
+
+  &:hover {
+    filter: brightness(0.8);
+  }
+}
+
+.closeIcon {
+  margin-left: 1rem;
+}

ignews/src/components/SubscribeButton/index.tsx

@@ -0,0 +1,11 @@
+import styles from "./styles.module.scss";
+
+export function SubscribeButton() {
+  return (
+    <>
+      <button type="button" className={styles.subscribeButton}>
+        Subscribe now
+      </button>
+    </>
+  );
+}

ignews/src/components/SubscribeButton/styles.module.scss

@@ -0,0 +1,18 @@
+.subscribeButton {
+  height: 4rem;
+  border-radius: 2rem;
+  width: 260px;
+  border: 0;
+  background: var(--yellow-500);
+  font-size: 1.25rem;
+  font-weight: bold;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: filter 0.2s;
+
+  &:hover {
+    filter: brightness(0.8);
+  }
+}

ignews/src/pages/_app.tsx

@@ -0,0 +1,14 @@
+import { AppProps } from "next/app";
+import { Header } from "../components/Header";
+import "../styles/global.scss";
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <>
+      <Header />
+      <Component {...pageProps} />
+    </>
+  );
+}
+
+export default MyApp;

ignews/src/pages/_document.tsx

@@ -0,0 +1,23 @@
+import Document, { Html, Head, Main, NextScript } from "next/document";
+
+export default class MyDocument extends Document {
+  render() {
+    return (
+      <Html>
+        <Head>
+          <link rel="preconnect" href="https://fonts.googleapis.com" />
+          <link rel="preconnect" href="https://fonts.gstatic.com" />
+          <link
+            href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap"
+            rel="stylesheet"
+          />
+          <link rel="shortcut icon" href="/favicon.png" type="image/png" />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}

ignews/src/pages/home.module.scss

@@ -0,0 +1,47 @@
+.container {
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: 0 2rem;
+  height: calc(100vh - 5rem);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.hero {
+  max-width: 600px;
+
+  > span {
+    font-size: 1.5rem;
+    font-weight: normal;
+
+    strong {
+      font-weight: bold;
+    }
+  }
+
+  h1 {
+    font-size: 4.5rem;
+    line-height: 4.5rem;
+    font-weight: 900;
+    margin-top: 2.5rem;
+
+    span {
+      color: var(--cyan-500);
+    }
+  }
+
+  p {
+    font-size: 1.5rem;
+    line-height: 2.25rem;
+    margin-top: 1.5rem;
+
+    span {
+      color: var(--cyan-500);
+      font-weight: bold;
+    }
+  }
+  button {
+    margin-top: 2.5rem;
+  }
+}