concluindo dia 3 da nlw

next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  images: {
+    domains: ['images.unsplash.com', 'storage.googleapis.com'],
+  }
+}

package.json

@@ -9,6 +9,7 @@
     "server": "json-server server.json -w -d 750 -p 3333"
   },
   "dependencies": {
+    "axios": "^0.21.1",
     "date-fns": "^2.21.1",
     "next": "10.1.3",
     "react": "17.0.2",

src/components/Header/index.tsx

@@ -13,7 +13,7 @@ export function Header() {
 
       <img src="/podcast2.png" alt="logo" />
 
-      <p>Para se manter programando .</p>
+      <p>Para se manter programando atualizado.</p>
 
       <span>{currentDate}</span>
 

src/pages/episodios/[slug].tsx

@@ -0,0 +1,93 @@
+import { format, parseISO } from "date-fns";
+import ptBR from "date-fns/locale/pt-BR";
+import { GetStaticPaths, GetStaticProps } from "next";
+import api from "../../services/api";
+import { convertDurationToTimeString } from "../../utils/convertDurationToTimeString";
+import styles from "./episode.module.scss";
+import Image from "next/image";
+import Link from 'next/link';
+
+type Episode = {
+  id: string;
+  title: string;
+  members: string;
+  publishedAt: string;
+  thumbnail: string;
+  duration: number;
+  url: string;
+  description: string;
+  durationAsString: string;
+};
+
+type EpisodeProps = {
+  episode: Episode;
+};
+
+export default function Episode({ episode }: EpisodeProps) {
+  return (
+    <div className={styles.episode}>
+      <div className={styles.thumbnailContainer}>
+        <Link href='/'>
+          <button type="button">
+            <img src="/arrow-left.svg" alt="Voltar" />
+          </button>
+        </Link>
+        <Image
+          width={700}
+          height={160}
+          src={episode.thumbnail}
+          objectFit="cover"
+        />
+        <button type="button">
+          <img src="/play.svg" alt="Tocar episódio" />
+        </button>
+      </div>
+
+      <header>
+        <h1>{episode.title}</h1>
+        <span>{episode.members}</span>
+        <span>{episode.publishedAt}</span>
+        <span>{episode.durationAsString}</span>
+      </header>
+
+      <div
+        className={styles.description}
+        dangerouslySetInnerHTML={{ __html: episode.description }}
+      ></div>
+    </div>
+  );
+}
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  return {
+    paths: [],
+    fallback: "blocking",
+  };
+};
+
+export const getStaticProps: GetStaticProps = async (ctx) => {
+  const { slug } = ctx.params;
+
+  const { data } = await api.get(`/episodes/${slug}`);
+
+  const episode = {
+    id: data.id,
+    title: data.title,
+    thumbnail: data.thumbnail,
+    members: data.members,
+    publishedAt: format(parseISO(data.published_at), "d MMM yy", {
+      locale: ptBR,
+    }),
+    duration: Number(data.file.duration),
+    durationAsString: convertDurationToTimeString(Number(data.file.duration)),
+    description: data.description,
+    url: data.file.url,
+  };
+
+  return {
+    props: {
+      episode,
+    },
+    revalidate: 60 * 60 * 24 * 2, //pg atualizada a cada 48 horas
+  };
+};

src/pages/episodios/episode.module.scss

@@ -0,0 +1,86 @@
+.episode {
+  max-width: 45rem;
+  padding: 3rem 2rem;
+  margin: 0 auto;
+
+  .thumbnailContainer {
+    position: relative;
+
+    img {
+      border-radius: 1rem;
+    }
+
+    button {
+      width: 3rem;
+      height: 3rem;
+      border-radius: 0.75rem;
+      border: 0;
+      position: absolute;
+      z-index: 5;
+      font-size: 0;
+
+      transition: filter 0.2s;
+
+      &:first-child {
+        left: 0;
+        top: 50%;
+        background: var(--blue-200);
+        transform: translate(-50%, -50%);
+      }
+
+      &:last-child {
+        right: 10;
+        top: 50%;
+        background: var(--orange-300);
+        transform: translate(-50%, -50%);
+      }
+
+      &:hover {
+        filter: brightness(0.9);
+      }
+    }
+  }
+
+  header {
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--gray-100);
+
+    h1 {
+      margin-top: 2rem;
+      margin-bottom: 1.5rem;
+    }
+
+    span {
+      display: inline-block;
+      font-size: 0.875rem;
+
+      & + span {
+        margin-left: 1rem;
+        padding-left: 1rem;
+        position: relative;
+
+        &::before {
+          content: "";
+          width: 4px;
+          height: 4px;
+          border-radius: 2px;
+          background: #ddd;
+          position: absolute;
+          left: 0;
+          top: 50%;
+          transform: translate(-50%, -50%);
+        }
+      }
+    }
+  }
+
+  .description {
+    margin-top: 2rem;
+    line-height: 1.675rem;
+    color: var(--gra-800);
+
+    p {
+      margin: 1.5rem 0;
+    }
+  }
+}

src/pages/home.module.scss

@@ -0,0 +1,169 @@
+.homepage {
+  padding: 0 4rem;
+  height: calc(100vh - 6.5rem);
+  overflow-y: scroll;
+
+  h2 {
+    margin-top: 3rem;
+    margin-bottom: 1.5rem;
+  }
+}
+
+.latestEpisodes {
+  ul {
+    list-style: none;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+
+    li {
+      background: var(--white);
+      border: 1px solid var(--gray-100);
+      padding: 1.25rem;
+      border-radius: 1.5rem;
+      position: relative;
+      display: flex;
+      align-items: center;
+
+      img {
+        width: 6rem;
+        height: 6rem;
+        border-radius: 1rem;
+      }
+
+      .episodeDetails {
+        flex: 1;
+        margin-left: 1rem;
+
+        a {
+          display: block;
+          color: var(--gray-800);
+          font-family: Lexend, sans-serif;
+          font-weight: 600;
+          text-decoration: none;
+          line-height: 1.4rem;
+
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+        p {
+          font-size: 0.875rem;
+          margin-top: 0.5rem;
+          max-width: 70%;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        span {
+          display: inline-block;
+          margin-top: 0.5rem;
+          font-size: 0.875rem;
+
+          &:last-child {
+            margin-left: 0.5rem;
+            padding-left: 0.5rem;
+            position: relative;
+
+            &::before {
+              content: "";
+              width: 4px;
+              height: 4px;
+              border-radius: 2px;
+              background: #ddd;
+              position: absolute;
+              left: 0;
+              top: 50%;
+              transform: translate(-50%, -50%);
+            }
+          }
+        }
+      }
+      button {
+        position: absolute;
+        right: 2rem;
+        bottom: 2rem;
+        width: 2.5rem;
+        height: 2.5rem;
+        background: var(--white);
+        border: 1px solid var(--gray-100);
+        border-radius: 0.675rem;
+        font-size: 0;
+        transition: filter 0.2s;
+
+        img {
+          width: 1.5rem;
+          height: 1.5rem;
+        }
+
+        &:hover {
+          filter: brightness(0.95);
+        }
+      }
+    }
+  }
+}
+
+.allEpisodes {
+  padding-bottom: 2rem;
+
+  table {
+    width: 100%;
+
+    th,
+    td {
+      padding: 0.75rem 1rem;
+      border-bottom: 1px solid var(--gray-100);
+    }
+
+    th {
+      color: var(--gray-200);
+      text-transform: uppercase;
+      font: 500 0.75rem Lexend, sans-serif;
+      text-align: left;
+    }
+
+    td {
+      font-size: 0.875rem;
+
+      img {
+        width: 2.5rem;
+        height: 2.5rem;
+        border-radius: 0.5rem;
+      }
+
+      a {
+        color: var(--gray-800);
+        font-family: Lexend, sans-serif;
+        font-weight: 600;
+        text-decoration: none;
+        line-height: 1.4rem;
+        font-size: 1rem;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+      button {
+        width: 2rem;
+        height: 2rem;
+        background: var(--white);
+        border: 1px solid var(--gray-100);
+        border-radius: 0.5rem;
+        font-size: 0;
+        transition: filter 0.2s;
+
+        img {
+          width: 1.25rem;
+          height: 1.25rem;
+        }
+
+        &:hover {
+          filter: brightness(0.95);
+        }
+      }
+    }
+  }
+