pedroparadella · CaioPawilak · Mar 31, 2022
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/README.md b/README.md
@@ -1,24 +1,17 @@
 # Avaliação Junior
-Olá desenvolvedor!\
-Tudo bem?! 😊\
-\
-Seja bem-vindo, o intuito do teste não é reprovar e sim conhecer seu melhor estilo de programar e resolver problemas.
 
-## O que fazer
-1. Fazer um fork desse repositório e trabalhar no seu ambiente.
-2. Replicar o layout do link abaixo, pode usar dados de um JSON local:\
-[Link para o layout](https://xd.adobe.com/view/c715f110-fbd4-4323-be0c-0e453c1450db-9246)
-2. Fazer a funcionalidade de busca funcionar.
-3. Os cliques nos botões de editar/excluir/criar card podem exibir uma mensagem pro usuário de que a funcionalidade não foi implementada.
-4. Ao finalizar a avaliação modifique esse README com as instruções de como podemos fazer o seu código rodar na nossa máquina. Ou seja, passo a passo do que instalar e de quais comandos rodar para podermos visualizar o seu trabalho!
-5. Realizar um Pull Request para o nosso repositório e mandar um e-mail para [email protected] com o assunto "Avaliação Junior", informando que finalizou a avaliação e colocando o link do Pull Request. 
+## Breve Explicação
+A página foi criada utilizando ReacjJs, Typescript e Styled Components. Criei o layout responsivo e utilizei as medidas como "rem".
+Infelizmente não localizei a fonte mulish e utilizei uma fonte equivalente que busquei no goole fonts.
+Criei uma api fake para consumir os dados.
+Implementei a funcionalidade de adicionar card mas faltou inserir a foto. 
 
-## Dicas
-* Não foi definido limite de linhas e colunas, portanto fique à vontade para tal escolha.
-* Gostamos de interfaces limpas e elegantes.
+1. Rodar o compando yarn para instalar as dependências
+
+
+## Tecnologias
+* ReactJs
+* Typescript
+* Styled-Components
 
-## Quais tecnologias usar
-* Deixaremos a seu critério qual tecnologia utilizar no entanto você terá mais pontos conosco se utilizar React para criação da interface e também o uso de pré-processadores/styled-components para o CSS.
 
-## Desafios se você se sentir confiante
-* Usar alguma API na internet, tipo https://pokeapi.co/, para trazer os dados que vão aparecer nos cards da tela.
diff --git a/index.html b/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Teste Ímpar - Caio</title>
+
+
+  <link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,400;0,700;1,300;1,600&display=swap"
+    rel="stylesheet">
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="./src/main.tsx"></script>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "impar-teste",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@types/react-modal": "^3.13.1",
+    "@types/styled-components": "^5.1.24",
+    "axios": "^0.26.1",
+    "install": "^0.13.0",
+    "miragejs": "^0.1.43",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-modal": "^3.14.4",
+    "styled-components": "^5.3.5",
+    "sweetalert2": "^11.4.8",
+    "types": "^0.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.33",
+    "@types/react-dom": "^17.0.10",
+    "@vitejs/plugin-react": "^1.0.7",
+    "typescript": "^4.5.4",
+    "vite": "^2.8.0"
+  }
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,53 @@
+import { GlobalStyle } from './styles/global'
+import { Header } from './components/Header'
+import { SearchBox } from './components/SearchBox'
+import { MainContent } from './components/Main'
+import { NewCardModal } from './components/NewCardModal'
+
+import Modal from 'react-modal'
+
+import { useState } from 'react';
+import { CardProvider } from './hooks/useNewCard'
+
+Modal.setAppElement('#root')
+
+
+export function App() {
+  const [isNewCardModalOpen, setIsNewCardModalOpen] = useState(false);
+
+
+  function handleOpenNewCardModal() {
+    setIsNewCardModalOpen(true)
+
+  }
+  function handleCloseNewCardModal() {
+    setIsNewCardModalOpen(false)
+
+
+  }
+
+
+
+
+
+  return (
+    <CardProvider>
+
+      <Header />
+      <SearchBox />
+      <MainContent onOpenNewCardModal={handleOpenNewCardModal} />
+      <NewCardModal
+        isOpen={isNewCardModalOpen}
+        onRequestClose={handleCloseNewCardModal}
+      />
+      <GlobalStyle />
+
+    </CardProvider>
+
+
+
+
+  )
+}
+
+
diff --git a/src/assets/Icon-edit.svg b/src/assets/Icon-edit.svg
diff --git a/src/assets/Icon-trash.svg b/src/assets/Icon-trash.svg
diff --git a/src/assets/fundo-busca.png b/src/assets/fundo-busca.png
diff --git a/src/assets/icone.svg b/src/assets/icone.svg
diff --git a/src/assets/icone_criar.svg b/src/assets/icone_criar.svg
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
diff --git a/src/assets/lupa.svg b/src/assets/lupa.svg
diff --git a/src/components/CardItem/index.tsx b/src/components/CardItem/index.tsx
@@ -0,0 +1,58 @@
+import { useState } from 'react'
+
+import { Container, Line, Content, ImageContent, TextContent, CardFooter } from './styles';
+import handImg from '../../assets/icone.svg'
+import editIcon from '../../assets/Icon-edit.svg'
+import deleteicon from '../../assets/Icon-trash.svg'
+
+
+import { DeleteModal } from '../DeleteModal'
+
+interface CardItensProps {
+    text: string,
+    svg?: string
+}
+
+export function CardItem({ text, svg }: CardItensProps) {
+
+    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+
+    function handleOpenDeleteModal() {
+        setIsDeleteModalOpen(true)
+
+    }
+    function handleCloseDeleteModal() {
+        setIsDeleteModalOpen(false)
+
+    }
+    function ManutencaoMessage(){
+        alert("Poxa... infelizmente essa funcionalidade está em manutenção. Estamos trabalhando para normalizar a situação. Pedimos desculpa pelo transtorno.")
+
+    }
+
+    return (
+
+        <Container>
+            <Content>
+                <ImageContent>
+                    <img src={handImg} alt="Aqui fica a logo" />
+                </ImageContent>
+                <Line></Line>
+                <TextContent>
+                    <p>{text}</p>
+                </TextContent>
+            </Content>
+            <CardFooter>
+                <span><img src={deleteicon} onClick={handleOpenDeleteModal} /> Excluir</span>
+                <span><img src={editIcon} onClick={ManutencaoMessage}  />Editar</span>
+                <DeleteModal
+                    isOpen={isDeleteModalOpen}
+                    onRequestClose={handleCloseDeleteModal}
+                />
+            </CardFooter>
+
+
+        </Container>
+
+    );
+}
diff --git a/src/components/CardItem/styles.ts b/src/components/CardItem/styles.ts
@@ -0,0 +1,97 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+    flex-grow:1;
+    width:23.4rem;
+    max-width:23.4rem;
+    height:26.7rem;
+    max-height:26.7rem;
+    border-radius:8px;
+    display:flex;
+    flex-direction:column;
+    align-items: center;
+    background:var(--color-white);
+    box-shadow: 0px 3px 6px #E5E5E5;
+
+`;
+
+export const Content = styled.div`
+
+ display:flex;
+    flex-direction:column;
+    align-items: center;
+    width:85%;
+   height:70%;
+    margin:2.8rem 7.0rem 2.0rem;
+    overflow: hidden;
+
+
+`
+
+export const ImageContent = styled.div`
+    height:9.5rem;
+    width:9.5rem;
+    background:var(--color-bg);
+    border-radius:50%;
+    border: 1px solid #E4E4E4;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+
+    img{
+        width:6.4rem;
+        height:6.4rem;
+    }
+
+
+`
+export const TextContent = styled.div`
+    padding:0.5rem;
+    font-family:Mulish, sans-serif;
+    font-weight:500;
+    line-height:2.0rem;
+    color: #263238;
+    font-size:1.6rem;
+    text-align: center;
+    text-overflow:clip;
+    letter-spacing: 0px;
+    display:block;
+
+
+`
+export const CardFooter = styled.div`
+    height:4.3rem;
+    margin-bottom:0px;
+    background:#0000000F 0.2;
+    color:black;
+    width:100%;
+    height:4.3rem;
+    padding-bottom:0px;
+    box-shadow: inset 0px 3px 6px #0000000F;
+    display:flex;
+    justify-content:space-around ;
+    align-items: center;
+    opacity:0.7;
+
+    span{ 
+
+        display:flex;
+        color:#263238;
+        font-family:Mulish, sans-serif;
+        font-size:1.5rem;
+        font-weight:lighter;
+        margin-right:1.5rem;
+        img{
+            margin:0 1rem;
+        }
+    }
+`
+export const Line = styled.div`
+    margin:0.5rem;
+    margin-top:2.2rem;
+    height:1px;
+    width:100%;
+    background:#E4E4E4;
+    opacity: 0.5;
+
+`
diff --git a/src/components/CardList/index.tsx b/src/components/CardList/index.tsx
@@ -0,0 +1,26 @@
+import { useNewCardContext } from '../../hooks/useNewCard';
+import { CardItem } from '../CardItem'
+import { Container } from './styles';
+
+
+export function CardList() {
+    const {cardItems, cardFiltered} = useNewCardContext()
+
+
+
+    var controlView =[]
+    if(cardFiltered.length > 0){
+        controlView = cardFiltered
+    }else{
+        controlView = cardItems
+    }
+
+    return (
+        <Container>
+           {controlView.map((item) => {
+                return <CardItem key={item.id} text={item.text} />
+            })}
+        </Container>
+    );
+}
+
diff --git a/src/components/CardList/styles.ts b/src/components/CardList/styles.ts
@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+    display:flex;
+    flex-wrap:wrap;
+    justify-content:  flex-start;
+    height:100%;
+    gap:3.5rem;
+`;