yssues project

.babelrc

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

debug.log

@@ -0,0 +1 @@
+[0117/050649.516:ERROR:registration_protocol_win.cc(102)] CreateFile: O sistema n�o pode encontrar o arquivo especificado. (0x2)

next.config.js

@@ -2,6 +2,9 @@
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
-}
+  // pageExtensions: ["Page.jsx"],
+};
 
-module.exports = nextConfig
+module.exports = {
+  nextConfig,
+};

package.json

@@ -2,19 +2,34 @@
   "name": "frontend-test",
   "version": "0.1.0",
   "private": true,
+  "homepage": "https://diegofrr.github.io/yssues",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build"
   },
   "dependencies": {
+    "@fontsource/plus-jakarta-sans": "^4.5.10",
+    "@primer/octicons-react": "^17.10.2",
+    "axios": "^1.2.2",
     "next": "13.0.6",
+    "npm": "^9.3.0",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "react-hot-toast": "^2.4.0",
+    "react-icons": "^4.7.1",
+    "react-loader-spinner": "^5.3.4",
+    "styled-components": "^5.3.6"
   },
   "devDependencies": {
     "eslint": "8.29.0",
-    "eslint-config-next": "13.0.6"
+    "eslint-config-next": "13.0.6",
+    "gh-pages": "^4.0.0"
+  },
+  "resolutions": {
+    "styled-components": "^5"
   }
 }

src/components/PagesComponents/Favorites/Favorite/index.jsx

@@ -0,0 +1,36 @@
+import { ArrowRightIcon, XIcon } from "@primer/octicons-react";
+import { Container, Content } from "./styles";
+import { useContext } from "react";
+import { FavoritesContext } from "../../../../contexts/StorageRepositories/favorites";
+
+export default function FavoriteRepository({ data }) {
+  const { removeFavorite } = useContext(FavoritesContext);
+
+  function formatUrl(url) {
+    return url.replace("/", "%2F");
+  }
+
+  return (
+    <Container>
+      <Content>
+        <img alt={`${data.name} logo`} src={data.owner.avatar_url} />
+        <span>{data.full_name}</span>
+        <div>
+          <button onClick={() => removeFavorite(data)}>
+            <XIcon />
+          </button>
+          <a
+            target="_blank"
+            rel="noreferrer"
+            href={`/repository/${formatUrl(data.full_name)}`}
+          >
+            Acessar
+            <span>
+              <ArrowRightIcon size={14} />
+            </span>
+          </a>
+        </div>
+      </Content>
+    </Container>
+  );
+}

src/components/PagesComponents/Favorites/Favorite/styles.js

@@ -0,0 +1,98 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  width: 100%;
+  border: 1px solid ${(p) => p.theme.colors.header.border};
+  border-radius: 10px;
+  transition: all 0.3s ease;
+`;
+
+export const Content = styled.div`
+  margin: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: left;
+  gap: 10px;
+  position: relative;
+
+  img {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+  }
+
+  span {
+    transition: all 0.3s ease;
+    color: ${(p) => p.theme.colors.primary};
+    font-size: 1.1rem;
+  }
+
+  div {
+    position: absolute;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: row-reverse;
+    gap: 10px;
+
+    button {
+      display: grid;
+      place-items: center;
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      background-color: ${(p) => p.theme.colors.button.bg};
+      transition: all 0.3s ease;
+
+      svg {
+        transition: all 0.3s ease;
+        color: ${(p) => p.theme.colors.button.text};
+      }
+
+      :hover {
+        background-color: ${(p) => p.theme.colors.red};
+        svg {
+          color: #fff;
+        }
+      }
+    }
+
+    a {
+      display: flex;
+      transition: all 0.3s ease;
+      background-color: ${(p) => p.theme.colors.button.bg};
+      padding: 0 10px;
+      align-items: center;
+      justify-content: center;
+      height: 20px;
+      border-radius: 10px;
+      font-size: 0.8rem;
+      color: ${(p) => p.theme.colors.button.text};
+      font-weight: 600;
+
+      span {
+        display: grid;
+        place-items: center;
+        transform: scale(0);
+        width: 12px;
+        margin-left: -12px;
+
+        svg {
+          color: #fff;
+        }
+      }
+
+      :hover {
+        background-color: ${(p) => p.theme.colors.blue[200]};
+        color: #fff;
+
+        span {
+          transform: scale(1);
+          width: 12px;
+          margin-left: 4px;
+        }
+      }
+    }
+  }
+`;

src/components/PagesComponents/Home/Header/index.jsx

@@ -0,0 +1,30 @@
+import Link from "next/link";
+import ToggleThemeButton from "../../../SharedComponents/ToggleThemeButton";
+import Button from "../../../SharedComponents/Button";
+
+import { AppName, ButtonsContainer, Container, Content } from "./styles";
+import { useRouter } from "next/router";
+
+export default function Header() {
+  const router = useRouter();
+
+  const goToFavorites = () => router.push("/favorites");
+
+  return (
+    <>
+      <Container>
+        <Content>
+          <AppName rel="noreferrer" href="/">
+            y<span>ssues</span>
+          </AppName>
+          <ButtonsContainer>
+            <ToggleThemeButton />
+            <Button primary type="rounded" onClick={goToFavorites}>
+              Favoritos
+            </Button>
+          </ButtonsContainer>
+        </Content>
+      </Container>
+    </>
+  );
+}

src/components/PagesComponents/Home/Header/styles.js

@@ -0,0 +1,71 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  position: fixed;
+  display: grid;
+  place-items: center;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 60px;
+  background-color: ${(p) => p.theme.colors.bg};
+  border-bottom: 1px solid ${(p) => p.theme.colors.header.border};
+  margin-bottom: -1px;
+  z-index: 10000;
+`;
+
+export const Content = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: calc(100% - 40px);
+  max-width: 1000px;
+  height: 100%;
+`;
+
+export const AppName = styled.a`
+  color: ${(p) => p.theme.colors.header.title};
+  font-weight: 800;
+  font-size: 1.2rem;
+
+  @media only screen and (max-width: 320px) {
+    span {
+      display: none;
+    }
+  }
+`;
+
+export const ButtonsContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  gap: 20px;
+  margin-left: auto;
+`;
+
+export const Button = styled.div`
+  transition: all 0.3s ease;
+  display: grid;
+  place-items: center;
+  padding: 0 20px;
+  background-color: ${(p) => p.theme.colors.blue[200]};
+  color: #ffffff;
+  height: 32px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  border-radius: ${(buttonProps) =>
+    buttonProps.type === "rounded"
+      ? "100px"
+      : buttonProps.type === "rounded-square"
+      ? "4px"
+      : 0};
+
+  :hover {
+    background-color: ${(p) => p.theme.colors.blue[300]};
+  }
+
+  :active {
+    background-color: ${(p) => p.theme.colors.blue[100]};
+  }
+`;

src/components/PagesComponents/Home/HistoryRepository/index.jsx

@@ -0,0 +1,16 @@
+import { Container, Content } from "./styles";
+
+export default function HistoryRepository({ data }) {
+  function formatUrl(url) {
+    return url.replace("/", "%2F");
+  }
+
+  return (
+    <Container href={`/repository/${formatUrl(data.full_name)}`}>
+      <Content>
+        <img alt={`${data.name} logo`} src={data.owner.avatar_url} />
+        <span>{data.full_name}</span>
+      </Content>
+    </Container>
+  );
+}

src/components/PagesComponents/Home/HistoryRepository/styles.js

@@ -0,0 +1,36 @@
+import styled from "styled-components";
+
+export const Container = styled.a`
+  max-width: 100%;
+  border: 1px solid ${(p) => p.theme.colors.header.border};
+  padding: 10px;
+  border-radius: 10px;
+  transition: all 0.3s ease;
+
+  :hover {
+    border-color: ${(p) => p.theme.colors.blue[200]};
+    span {
+      color: ${(p) => p.theme.colors.blue[200]};
+    }
+  }
+`;
+
+export const Content = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: left;
+  gap: 10px;
+
+  img {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+  }
+
+  span {
+    transition: all 0.3s ease;
+    color: ${(p) => p.theme.colors.secundary};
+    font-size: 1.1rem;
+  }
+`;