Test finished - Mateus Lopes

next.config.js

@@ -2,6 +2,10 @@
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
+  compiler: {
+    // ssr and displayName are configured by default
+    styledComponents: true,
+  },
 }
 
 module.exports = nextConfig

package.json

@@ -9,9 +9,13 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "next": "13.0.6",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "axios": "^1.2.2",
+    "next": "^13.1.2",
+    "react": "^18.2.0",
+    "react-dom": "18.2.0",
+    "react-icons": "^4.7.1",
+    "react-paginate": "^8.1.4",
+    "styled-components": "^5.3.6"
   },
   "devDependencies": {
     "eslint": "8.29.0",

src/components/formSearchItem/index.jsx

@@ -0,0 +1,37 @@
+import { Container } from "./style"
+import { BsSearch } from "react-icons/bs";
+import Router from "next/router";
+import { ThemeContext } from "../../contextx/themeContext";
+import { useContext } from "react";
+
+const FormSearchItem = (props) => {
+
+    const { theme } = useContext(ThemeContext);
+
+
+    const handleKeyPressInput = (event) => {
+        event.preventDefault();
+        props.handleKeyPressInput()
+    }
+
+    return (
+        <Container theme={theme}>
+            <div>
+                <h1> {props.label}</h1>
+                <form onSubmit={handleKeyPressInput}>
+                    <div >
+                        <input
+                            id="input_search_items"
+                            type="text"
+                            placeholder={props.placeholder}
+                        />
+                        <BsSearch />
+                    </div>
+                </form>
+
+            </div>
+        </Container >
+    )
+}
+
+export { FormSearchItem }

src/components/formSearchItem/style.js

@@ -0,0 +1,52 @@
+import styled from "styled-components";
+
+
+export const Container = styled.div`
+    margin-top: 2rem;
+    display: flex;
+    justify-content: center;
+
+    div{
+
+        h1{
+            color: ${(props) => props.theme.fontColor};
+            font-size: 36px;
+            text-align: center;
+        }
+
+        div{
+            display: flex;
+            width: 22rem;
+            height: 2.5rem;
+            margin-top: 1.5rem;
+            border-radius: 70px;
+
+            box-shadow: 1px 1px 3px black;
+            align-items: center;
+            padding: 0.8rem;
+            color: ${(props) => props.theme.fontColor};
+
+
+            input{
+                width: 20rem;
+                height: 1rem;
+                padding: 3px;
+                font-size: 14px;
+                outline: none;
+                border: none;        
+                background-color: ${(props) => props.theme.bg};
+                color: ${(props) => props.theme.fontColor};
+
+                &::placeholder {
+                    color: ${(props) => props.theme.fontColor};
+                    opacity: 0.6;
+                }
+
+                &:focus{
+                    background-color: ${(props) => props.theme.bg};
+                }
+            }
+        }
+    }
+
+`;

src/components/header/index.jsx

@@ -0,0 +1,19 @@
+import Link from "next/link"
+import { Container } from "./style"
+import { AiFillHome } from "react-icons/ai";
+import { useContext } from "react";
+import { ThemeContext } from "../../contextx/themeContext";
+import { ThemeMode } from "../themeMode";
+
+
+const Header = () => {
+
+    const { theme } = useContext(ThemeContext);
+
+    return (
+        <Container theme={theme}>
+            <ThemeMode />
+        </Container>
+    )
+}
+export { Header }

src/components/header/style.js

@@ -0,0 +1,38 @@
+import styled from "styled-components"
+
+
+export const Container = styled.header`
+    display: flex;
+
+   background-color: ${(props) => props.theme.bgHeader};
+
+    height: 4rem;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2rem;
+
+    svg{
+        font-size: 28px;
+
+        path{
+            color: white;
+        }
+    }
+
+    /* ul {
+        display: flex; 
+        justify-content: space-between;
+        width: 10rem;
+
+        li{
+            list-style: none;
+            a{
+                display: block;
+                text-decoration: none;
+                color: white;
+            }
+        }
+    } */
+
+`;

src/components/messageBox/index.jsx

@@ -0,0 +1,24 @@
+import { useContext } from "react"
+import { ThemeContext } from "../../contextx/themeContext"
+import { Container } from "./style"
+import { IoWarning } from "react-icons/io5"
+
+
+
+const MessageBox = () => {
+
+    const { mode } = useContext(ThemeContext)
+
+    return (
+        <Container mode={mode}>
+            <span>
+                <IoWarning />
+            </span>
+            <p>
+                Nenhum resultado encontrado
+            </p>
+        </Container>
+    )
+}
+
+export { MessageBox }

src/components/messageBox/style.js

@@ -0,0 +1,27 @@
+import styled from "styled-components"
+
+export const Container = styled.div`
+    display: flex;
+    margin: 4rem auto;
+    justify-content: center;
+    align-items: center;
+    width: 22rem;
+    height: 5rem;
+    color: ${(props) => props.theme.fontColor};
+    background-color:#b0fbf1;
+    background-color: ${(props) => props.mode === "ligth" ? "#b0fbf1" : "#1A283D"};
+    border-radius: 3px;
+    border: 0.01px solid #65EEC1;
+
+    p{
+        color: ${(props) => props.mode === "ligth" ? "#09c7ac" : "#8CADC7"};
+        font-size: 18px;
+        margin-left: 0.4rem;
+    }
+
+    svg{
+        color: ${(props) => props.mode === "ligth" ? "#09c7ac" : "#8CADC7"};
+        font-size: 18px
+    }
+
+`;

src/components/pageProduct/index.jsx

@@ -0,0 +1,32 @@
+import Link from "next/link"
+import { useContext } from "react";
+import { ThemeContext } from "../../contextx/themeContext";
+import { Container } from "./style"
+
+const defaultThumbnailURL = "https://cosmos.bluesoft.com.br/assets/product-placeholder-ce4926921923d1e9bc66cd0e1493b49b.png"
+
+const PageProduct = (props) => {
+
+    const { theme } = useContext(ThemeContext);
+
+    return (
+        <Container theme={theme}>
+            <div className="header_product">
+                <h1>{props.data?.description}</h1>
+                <div>
+                    <img src={props.data.thumbnail ? props.data.thumbnail : defaultThumbnailURL} />
+                </div>
+                <p>GTIN/EAN: {props.data?.gtin}</p>
+            </div>
+            <div className="footer_product">
+                <p>
+                    NCM: {props.data?.ncm?.full_description}
+                </p>
+                < Link href="/">
+                    Voltar ao inicio
+                </Link>
+            </div>
+        </Container>
+    )
+}
+export { PageProduct }

src/components/pageProduct/style.js

@@ -0,0 +1,91 @@
+import styled from "styled-components"
+
+export const Container = styled.div`
+
+    margin-top: 4rem;
+
+    .header_product{
+        text-align: center;
+
+        div{
+            margin-top: 2rem;
+        }
+
+        h1{
+            font-size: 24px;
+            color: ${(props) => props.theme.fontColor}
+        }
+
+        img{
+            max-width: 12rem;
+            max-height: 12rem;
+        }
+
+        p{
+            font-weight: bold;
+            font-size: 18px;
+            color: ${(props) => props.theme.fontColor};
+            margin-top: 1rem;
+            opacity: 0.6;
+
+        }
+
+    }
+
+    .footer_product{
+        margin: 1.5rem auto;
+        line-height: 1.5em;
+        max-width: 34rem;
+        text-align: center;
+
+        p{
+            font-size: 16px;
+            text-align: left;
+            margin-bottom: 2rem;
+            color: ${(props) => props.theme.fontColor};
+
+        }
+
+        a{
+            color: ${(props) => props.theme.linkColor};
+        }
+    }
+
+
+
+
+
+
+    @media (max-width: 768px){
+        .footer_product{
+            max-width: 34rem;
+        }
+    }
+
+
+
+
+    @media (max-width: 688px) {
+
+        margin-top: 5rem;
+        padding: 0 3rem;
+
+        .header_product{
+            text-align: center;
+
+            h1{
+                margin: 0 auto;
+                font-size: 18px;
+                max-width: 22rem;
+            }
+
+            img{
+                max-width: 10rem;
+                max-height: 10rem;
+            }
+        }
+    }
+
+
+
+`;