[Guilherme aranha] frontend test two

components/CatCard.jsx

@@ -0,0 +1,11 @@
+// import Image from "next/image";
+import { Wrapper, Image } from '../styles/CatStyles';
+
+export default function CatCard(props) {
+  const {url} = props;
+  return (
+    <Wrapper>
+      <Image src={url} alt="A cat" />
+    </Wrapper>
+  );
+}

components/DogCard.jsx

@@ -0,0 +1,13 @@
+export default function DogCard(props) {
+  const {title, text} = props;
+  return (
+    <div>
+      <h5>
+        {title}
+      </h5>
+      <p>
+        {text}
+      </p>
+    </div>
+  );
+}

components/DogImageCard.jsx

@@ -0,0 +1,40 @@
+import styled from "styled-components";
+import px2vw from "../services/px2vw";
+
+const Wrapper = styled.div`
+  position: relative;
+  width: ${px2vw(600)};
+  height: ${px2vw(600)};
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  border-radius: 15px;
+  background: linear-gradient(to right, #11998e,#38ef7d);
+  padding: ${px2vw(10)};
+
+  margin-top: 10%;
+  @media (min-width: 550px) {
+    width: ${px2vw(400)};
+    height: ${px2vw(400)};
+  }
+`;
+
+const Image = styled.img`
+  display:block;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: 25px;
+  border: 2px solid black;
+  src: ${props => props.url};
+`;
+
+export default function DogImageCard(props) {
+  const {url} = props;
+
+  return (
+    <Wrapper>
+      <Image src={url} alt="A dog"/>
+    </Wrapper>
+  );
+}

components/NavBar.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { PrimaryNav, MenuLink, Menu } from '../styles/NavBarStyles'
+export default function NavBar() {
+
+  return (
+    <>
+      <PrimaryNav>
+        <Menu>
+          <MenuLink href="/" activeStyle>
+            Home
+          </MenuLink>
+          <MenuLink href="/dog" activeStyle>
+            Dog
+          </MenuLink>
+          <MenuLink href="/cat" activeStyle>
+            Cat
+          </MenuLink>
+        </Menu>
+      </PrimaryNav>
+    </>
+  );
+}

components/Theme.jsx

@@ -0,0 +1,12 @@
+export const lightTheme = {
+    body: '#FFF',
+    text: '#363537',
+    toggleBorder: '#FFF',
+    background: '#363537',
+}
+export const darkTheme = {
+    body: '#363537',
+    text: '#FAFAFA',
+    toggleBorder: '#6B8096',
+    background: '#999',
+}

components/Toggler.jsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import styled from "styled-components";
+
+const HiddenCheckbox = styled.input.attrs({ type: 'checkbox' })`
+  display: none;
+}`;
+
+const Span = styled.span`
+  height: 1.25rem;
+  width: 1.25rem;
+  border-radius: 9999px;
+  background: ${({ theme }) => theme.background};
+}`;
+
+const Label = styled.label
+  `cursor: pointer;
+  background-color: rgb(113 113 122);
+  display: flex;
+  align-items: center;
+  padding: 0.25rem;
+  width: 3.5rem;
+  height: 1.75rem;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  border-radius: 9999px;
+  margin: 1rem;
+
+  ${HiddenCheckbox}:checked + & {
+    background-color: rgb(228 228 231);
+    justify-content: flex-end;
+  }`;
+
+const Toggle = ({theme,  toggleTheme }) => {
+  return (
+    <>
+      <HiddenCheckbox 
+        id="check"
+        onChange={e => toggleTheme(e)}/>
+      <Label htmlFor="check">
+        <Span></Span>
+      </Label>
+    </>
+  );
+};
+
+export default Toggle;

components/useDarkMode.jsx

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+
+export const useDarkMode = () => {
+  const [theme, setTheme] = useState('light');
+  const [mountedComponent, setMountedComponent] = useState(false)
+
+  const setMode = mode => {
+    window.localStorage.setItem('theme', mode)
+    setTheme(mode)
+  };
+
+  const themeToggler = () => {
+    theme === 'light' ? setMode('dark') : setMode('light')
+  };
+
+  useEffect(() => {
+    const localTheme = window.localStorage.getItem('theme');
+    localTheme && setTheme(localTheme)
+    setMountedComponent(true)
+  }, []);
+  return [theme, themeToggler, mountedComponent]
+};

next.config.js

@@ -2,6 +2,22 @@
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'cataas.com',
+        port: '',
+        pathname: '/cat/**',
+      },
+      {
+        protocol: 'https',
+        hostname: 'images.dog.ceo',
+        port: '',
+        pathname: '/breeds/**',
+      },
+    ],
+  },
 }
 
 module.exports = nextConfig