Luiz Guilherme Avelino

.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "next/babel"
+  ],
+  "plugins": [
+    [
+      "styled-components",
+      {
+        "ssr": true,
+        "displayName": true
+      }
+    ]
+  ]
+}

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -1,5 +1,36 @@
-# Dependency directories
-node_modules/
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-# Next.js build output
-.next
+# 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*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

components/footer/index.jsx

@@ -0,0 +1,13 @@
+import { FooterStyled } from './style'
+
+export default function Footer() {
+  return (
+    <FooterStyled>
+      <span>Sobre a Apiki</span>
+      <p>Empresa especializada em WordPress com três unidades de negócios.</p>
+      <p>Design e Desenvolvimento;</p>
+      <p>Suporte e manutenção.</p>
+      <p>Em resumo, só fazemos uma coisa em WordPress: tudo.</p>
+    </FooterStyled>
+  )
+}

components/footer/style.js

@@ -0,0 +1,25 @@
+import styled from "styled-components";
+import palet from "../../services/palet";
+
+export const FooterStyled = styled.footer`
+  display: flex;
+  background-color: #eee;
+  width: 100%;
+  flex-direction: column;
+  position: relative;
+  bottom: 0;
+  left: 0;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 24px;
+  span {
+    color: ${palet.secondary};
+    font-weight: 700;
+    margin-bottom: 18px;
+  }
+  p {
+    color: ${palet.primary};
+    line-height: 1.6;
+    text-align: center;
+  }
+`;

components/header/index.jsx

@@ -0,0 +1,13 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import logo from '../../images/logo.png';
+import { HeaderContainer } from './style';
+
+export default function Header() {
+  return (
+    <HeaderContainer>
+      <Image src={logo} alt='Apiki Logo' />
+      <Link href='/'>Home</Link>
+    </HeaderContainer>
+  )
+}

components/header/style.js

@@ -0,0 +1,24 @@
+import styled from "styled-components";
+import palet from "../../services/palet";
+
+export const HeaderContainer = styled.header`
+  background-color: ${palet.primary};
+  background: linear-gradient(90deg, #67666a 0%, #000000 100%);
+  width: 100%;
+  height: 60px;
+  display: flex;
+  margin-bottom: 16px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+
+  a {
+    text-decoration: none;
+    color: #eee;
+    font-weight: 500;
+    transition: 0.4s;
+    :hover {
+      color: ${palet.highligth};
+    }
+  }
+`;

components/postCard/index.js

@@ -0,0 +1,21 @@
+/* eslint-disable @next/next/no-img-element */
+import { useRouter } from 'next/router';
+import { Card, Description } from './style';
+
+export default function PostCard(prop) {
+  const { image, title, slug, author, description } = prop.info;
+  const router = useRouter()
+
+  const handleClick = () => router.push(`/blog/${slug}`)
+
+  return (
+    <Card>
+      <img src={image} alt={title} onClick={handleClick} />
+      <div onClick={handleClick}>
+        <h2>{title}</h2>
+        <p>{`Por ${author}`}</p>
+        <Description>{description}</Description>
+      </div>
+    </Card>
+  )
+}

components/postCard/style.js

@@ -0,0 +1,60 @@
+import styled from "styled-components";
+import palet from "../../services/palet";
+
+export const Card = styled.article`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-height: 90px;
+  margin-bottom: 24px;
+  align-items: flex-start;
+  justify-content: flex-start;
+
+  img {
+  max-width: 26%;
+  height: auto;
+  border-radius: 8px;
+  cursor: pointer;
+  }
+
+  @media screen and (min-width: 800px){
+    img {
+      max-width: 250px;
+    }
+  }
+
+  div {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  height: 100%;
+  padding: 8px;
+  cursor: pointer;
+    h2 {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1;
+    max-width: 400px;
+    color: ${palet.secondary};
+    transition: 0.4s;
+
+    :hover {
+      color: ${palet.highligth};
+    }
+    }
+    p {
+      color: ${palet.primary};
+      font-size: 12px;
+      margin-top: 4px;
+      max-width: 400px;
+    }
+  }
+`;
+
+export const Description = styled.p`
+  font-weight: 500;
+  @media screen and (max-width: 480px) {
+    display: none;
+  }
+`;

components/postsContainer/index.js

@@ -0,0 +1,41 @@
+import { useContext, useEffect, useState } from 'react';
+import AppContext from '../../context/AppContext';
+import { requestPosts } from '../../services/fetchAPI';
+import PostCard from '../postCard';
+import { Btn, BtnContainer, PageCount, PostContainer } from './style';
+
+export default function PostsContainer() {
+  const [page, setPage] = useState(1);
+  const { posts, setPosts } = useContext(AppContext);
+
+  useEffect(() => {
+    const getPosts = async () => {
+      const request = await requestPosts(page);
+      setPosts(request);
+    };
+    getPosts();
+  }, [page, setPosts]);
+
+  return (
+    <PostContainer>
+      {posts?.data && posts.data.map((post, i) => (
+        <PostCard key={i} info={
+          {
+            image: post["yoast_head_json"]["og_image"][0].url.replace('.png', '-350x250.png'),
+            title: post.title.rendered,
+            slug: post.slug,
+            author: post["yoast_head_json"]["twitter_misc"]["Escrito por"],
+            description: post['yoast_head_json'].description,
+          }
+        } />
+      ))}
+      <BtnContainer>
+        <Btn onClick={() => setPage(page === 1 ? 1 : page - 1)}>Voltar</Btn>
+        <PageCount>{`${page} de ${posts?.totalPages}`}</PageCount>
+        <Btn onClick={() => setPage(page < posts.totalPages ? page + 1 : page)}>Carregar mais...</Btn>
+      </BtnContainer>
+
+    </PostContainer>
+  )
+}
+

components/postsContainer/style.js

@@ -0,0 +1,42 @@
+import styled from "styled-components";
+
+export const PostContainer = styled.main`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 100vh;
+  align-items: center;
+  padding: 16px;
+  justify-content: center;
+
+  @media screen and (min-width: 800px){
+    padding: 46px;
+  }
+`
+
+export const BtnContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const Btn = styled.button`
+  padding: 8px 16px;
+  border-radius: 8px;
+  background: none;
+  margin: 8px;
+  border: 1px solid #eee;
+  transition: 0.4s;
+  cursor: pointer;
+  :hover {
+    background-color: #eee;
+  }
+  :active {
+    padding: 6px 14px;
+  }
+`;
+
+export const PageCount = styled.p`
+  font-size: 12px;
+  align-self: center;
+`;

context/AppContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const AppContext = createContext({});
+
+export default AppContext;

context/AppProvider.js

@@ -0,0 +1,17 @@
+import { useState } from "react";
+import AppContext from "./AppContext";
+
+export default function AppProvider({ data = {}, children }) {
+  const [posts, setPosts] = useState(data);
+
+  const contextValue = {
+    posts,
+    setPosts,
+  }
+
+  return (
+    <AppContext.Provider value={contextValue}>
+      {children}
+    </AppContext.Provider>
+  )
+}

next.config.js

@@ -0,0 +1,12 @@
+/** @type {import('next').NextConfig} */
+
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+  styledComponents: true,
+  images: {
+    domains: ['blog.apiki.com']
+  }
+}
+
+module.exports = nextConfig