ormacarbon · murielpacheco · Jan 11, 2023 · Jan 11, 2023 · Jan 11, 2023 · Jan 11, 2023
diff --git a/@types/styled.d.ts b/@types/styled.d.ts
@@ -0,0 +1,18 @@
+import "styled-components";
+
+declare module "styled-components" {
+   export interface DefaultTheme {
+      title: string;
+      colors: {
+         primary: string;
+         secondary: string;
+         lightGray: string;
+         offColor: string;
+         backgroundColor: string;
+         cardBgColor: string;
+         textCardItemColor: string;
+         textColor: string;
+         textHeaderColor: string;
+      }
+   }
+}
diff --git a/README.md b/README.md
@@ -1,3 +1,7 @@
+# Demonstração
+
+![gif](github/amostra.gif)
+
 # **TESTE DE FRONTEND**
 
 Neste teste, você será livre para criar uma aplicação consumindo a API que você quiser e com o tema que desejar.
@@ -6,42 +10,44 @@ Contudo, o seu projeto deverá seguir os requisitos mínimos de conteúdo.
 SUGESTÕES DE APIS:
 https://github.com/public-apis/public-apis
 
----------------------------------------------------------------------
+---
+
 ## REQUISITOS:
 
 - SEJA ORIGINAL, PROJETOS SUSPEITOS DE SEREM COPIADOS SERÃO DESCARTADOS!
 - QUEREMOS VER O SEU CÓDIGO, E NÃO O DE OUTROS.
 
 ## GIT
+
 - Faça um fork deste repositório.
 - Criar uma branch para codar as suas features.
 - Criar um pull-request quando o teste for finalizado e submetido.
 
 ##### **NOTA: Será avaliado também se o nome da branch, títulos de commit, push e comentários possuem boa legibilidade.**
 
------------------------------------------------------
+---
 
 ## FRAMEWORK
 
 - Utilizar as ferramentas presentes no framework do projeto (NEXT.JS).
 
------------------------------------------------------
+---
 
 ## ESTILOS
 
 - Os estilos deste teste devem ser feitos em styled-components (evite utilizar bootstrap, mas se necessário, use).
 - O projeto deverá conter tema claro/escuro e forma do usuário alterar entre os dois.
 - Deve ser totalmente responsivo.
 
------------------------------------------------------
+---
 
 ## PROJETO
 
 - Deve utilizar useContext, useState e useEffect.
 - Ter ao menos 3 paginas navegáveis com router (ex: um navbar para facilitar a navegação).
 - Deve consumir uma API de sua escolha, desde que os dados sejam filtraveis e paginados. No mínimo 15 itens por requisição.
 
--------------------------------------------------------
+---
 
 ## REQUISITOS DIFERENCIAIS:
 

diff --git a/github/amostra.gif b/github/amostra.gif
diff --git a/next.config.js b/next.config.js
@@ -2,6 +2,10 @@
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
+
+  compiler: {
+    styledComponents: true
+  }
 }
 
 module.exports = nextConfig
diff --git a/package.json b/package.json
@@ -10,11 +10,19 @@
   },
   "dependencies": {
     "next": "13.0.6",
+    "phosphor-react": "^1.4.1",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "react-is": "^18.2.0",
+    "react-switch": "^7.0.0",
+    "styled-components": "^5.3.6"
   },
   "devDependencies": {
+    "@types/node": "^18.11.18",
+    "@types/react": "^18.0.26",
+    "@types/styled-components": "^5.1.26",
     "eslint": "8.29.0",
-    "eslint-config-next": "13.0.6"
+    "eslint-config-next": "13.0.6",
+    "typescript": "^4.9.4"
   }
 }
diff --git a/pages/_app.js b/pages/_app.js
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -0,0 +1,34 @@
+import { useState } from 'react'
+import { AppProps} from 'next/app'
+import Head from 'next/head'
+
+import { ThemeProvider } from 'styled-components'
+import { Header } from '../src/components/Header'
+import { GlobalStyle } from '../src/styles/global'
+
+import light from "../src/styles/themes/light"
+import dark from "../src/styles/themes/dark"
+
+function MyApp({ Component, pageProps }: AppProps) {
+  const [theme, setTheme] = useState(dark)
+
+  function onChangeTheme(): void {    
+
+    setTheme(theme.title === 'light' ? dark : light)
+  }
+  return (
+    <>
+      <Head>
+        <title>Teste Frontend - Orma Carbon</title>
+      </Head>
+        <ThemeProvider theme={theme}>
+          <Header onChangeTheme={onChangeTheme} />
+          <Component {...pageProps} />
+          <GlobalStyle />
+        </ThemeProvider>
+
+    </>
+  )
+}
+
+export default MyApp
diff --git a/pages/about/index.tsx b/pages/about/index.tsx
@@ -0,0 +1,9 @@
+import { Title, Container } from "../../src/styles/about";
+
+export default function About() {
+  return (
+    <Container>
+      <Title>This application was built during a interview process for a job. This page is only for matters of navigation.</Title>
+    </Container>
+  )
+}
diff --git a/pages/gotItems/index.tsx b/pages/gotItems/index.tsx
@@ -0,0 +1,96 @@
+import { useRouter } from "next/router";
+import { useState } from "react"
+import { GotCard } from "../../src/components/GotCard";
+import { ButtonSearch, CardsContainer, Container, FilterInput, SearchContainer, ItemsAmount } from "../../src/styles/gotItems";
+
+interface CharactersProps {
+  name: string;
+  born: string;
+  titles: string[];
+  culture: string;
+  url: string;
+}
+
+
+export default function GOT({ data }) {
+  const router = useRouter()
+  const { page, pathname } = router.query;
+
+  const characters: CharactersProps[] = data
+  const [filterInput, setFilterInput] = useState('')
+
+
+  const charactersFiltered = characters.filter(item => item.name.toLowerCase().includes(filterInput.toLowerCase()))
+
+  const pageNumber = Number(page)
+
+  function handlePreviousPage() {
+    if (pageNumber <= 1) {
+      alert("There's no more pages going backwards")
+      return
+    }
+
+    router.push(
+      `/${pathname}?page=${Number(page) - 1}`,
+      `/gotItems?page=${Number(pageNumber) - 1}`,
+      {
+        shallow: true
+      }
+    )
+
+    setFilterInput('')
+  }
+
+  function handleNextPage() {
+    router.push(
+      `/${pathname}`,
+      `/gotItems?page=${Number(pageNumber) + 1}`,
+      {
+        shallow: true
+      }
+    )
+
+    setFilterInput('')
+  }
+
+  return (
+    <Container>
+      <SearchContainer>
+      <ButtonSearch type='button' onClick={handlePreviousPage}>Previous</ButtonSearch>
+      <FilterInput
+        type="text"
+        onChange={e => setFilterInput(e.target.value)}
+        value={filterInput}
+        placeholder='Search...'
+        />
+        <ButtonSearch type='button' onClick={handleNextPage}>Next</ButtonSearch>
+      </SearchContainer>
+        <ItemsAmount>{`Items (${charactersFiltered.length})`}</ItemsAmount>
+      <CardsContainer>
+        {charactersFiltered?.map(character => {
+          return (
+            <GotCard
+              key={character.url}
+              name={character.name}
+              titles={character.titles}
+              born={character.born}
+              culture={character.culture} />
+        )
+      })}
+
+      </CardsContainer>
+    </Container>
+  )
+}
+
+ export async function getServerSideProps ({ query }) {
+  const { page = 2 } = query
+
+  const res = await fetch(`${process.env.API_URL}?page=${page}&pageSize=15`)
+  const data = await res.json()
+  return {
+    props: {
+      data
+    }
+  }
+}
diff --git a/pages/index.js b/pages/index.js
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -0,0 +1,12 @@
+import Link from "next/link";
+import { Container, Title, SubTitle } from "../src/styles/home";
+
+
+export default function Home() {  
+  return (
+    <Container>
+      <Title>Saga - A Song of Ice and Fire API</Title>
+      <SubTitle>Click <Link href="/gotItems?page=2">here</Link> to go to Characters List.</SubTitle>
+    </Container>
+  )
+}
diff --git a/src/components/GotCard/index.tsx b/src/components/GotCard/index.tsx
@@ -0,0 +1,23 @@
+import { CardBorn, CardCulture, CardName, CardTitles, CardContainer } from "./styles"
+
+interface GotCardProps {
+  name: string;
+  born: string;
+  titles: string[];
+  culture: string;
+}
+
+export function GotCard({ name, born, titles, culture, }: GotCardProps) {
+  return (
+      <CardContainer>
+        <div>
+          <CardName>{name === '' ? 'Unknown Character' : name}</CardName>
+          <CardTitles>{titles[0] === '' ? 'No titles' : titles[0]}</CardTitles>
+        </div>
+        <div>
+          <CardBorn>Born at: {born === '' ? 'Unknown' : born}</CardBorn>
+          <CardCulture>Culture: {culture === '' ? 'Unknown' : culture}</CardCulture>
+        </div>
+      </CardContainer>  
+  )
+}
diff --git a/src/components/GotCard/styles.ts b/src/components/GotCard/styles.ts
@@ -0,0 +1,59 @@
+import styled from "styled-components"
+
+export const CardContainer = styled.div`
+  background-color: ${props => props.theme.colors.cardBgColor};
+  width: 420px;
+  height: 120px;
+  margin-top: 1rem;
+  border-radius: 8px;
+  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
+  color: ${props => props.theme.colors.textCardItemColor};
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 1rem;
+  margin-bottom: 1rem;
+  cursor: pointer;
+  transition: transform 0.5s, scale 0.5s;
+
+  &:hover {
+    transform: scale(1.1);
+    opacity: 1.1;
+  }
+
+  div {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+
+    @media (max-width: 450px) {
+    flex-direction: column;
+    gap: 2rem;
+  }
+  }
+`;
+export const CardName = styled.h3`
+  font-size: 1rem;
+
+`;
+export const CardTitles = styled.strong`
+  width: 160px;
+  font-size: .875rem;
+`;
+
+export const CardBorn = styled.span`
+  font-size: 0.75rem;
+  padding: .5rem;
+
+  @media (max-width: 450px) {
+    display: none;
+  }
+`;
+export const CardCulture = styled.span`
+  font-size: 0.75rem;
+
+  @media (max-width: 450px) {
+    display: none;
+  }
+`;
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -0,0 +1,16 @@
+import { useEffect, useState } from "react";
+import { Navbar } from "../Navbar";
+import { ThemeSwitcher } from "../ThemeSwitcher";
+import { Container } from "./styles";
+
+
+export function Header({ onChangeTheme }) {  
+
+
+  return (
+    <Container>
+      <Navbar/>
+      <ThemeSwitcher onChangeTheme={onChangeTheme} />
+    </Container>
+  )
+}