feat: setting up global styles, routing and creating header component

UnBArqDsw2021-1 · Sep 15, 2021 · 81a6bf8 · 81a6bf8
1 parent 94579b9
commit 81a6bf8
Show file tree

Hide file tree

Showing 9 changed files with 277 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -8,6 +8,8 @@
     "@testing-library/user-event": "^12.1.10",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.2.0",
+    "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"
   },
@@ -46,6 +48,7 @@
   "devDependencies": {
     "@types/react": "^17.0.20",
     "@types/react-dom": "^17.0.9",
+    "@types/react-router-dom": "^5.1.9",
     "@typescript-eslint/eslint-plugin": "^4.31.0",
     "@typescript-eslint/parser": "^4.31.0",
     "babel-eslint": "^10.1.0",

diff --git a/public/index.html b/public/index.html
@@ -2,6 +2,12 @@
 <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 />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500;1,600&display=swap"
+      rel="stylesheet"
+    />
     <title>PetStop</title>
   </head>
   <body>

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,9 +1,24 @@
 import React from "react";
+// import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+
+// Pages Imports
+// import { Home } from "./pages/Home";
+
+// Components Imports
+import { Header } from "./components/Header";
+
+// Styles Imports
+import "./styles/global.css";
 
 function App() {
   return (
     <div className="App">
-      <h1>PETSTOP</h1>
+      <Header />
+      {/* <Router>
+        <Switch>
+          <Route exact path="/" component={Home} />
+        </Switch>
+      </Router> */}
     </div>
   );
 }

diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { BiUserCircle } from "react-icons/bi";
+
+import imgLogo from "../../assets/logo.png";
+
+import "./styles.css";
+
+export function Header() {
+  return (
+    <div className="header-container">
+      <div className="header-content">
+        <a
+          href="/"
+          style={{
+            filter: "brightness(1)",
+          }}
+        >
+          <img src={imgLogo} alt="Logo Petstop" className="logo" />
+        </a>
+        <nav>
+          <a href="#">Eventos</a>
+          <a href="#">Doações</a>
+          <a href="#">Adoções</a>
+          <a href="#">Seja um voluntário</a>
+        </nav>
+        <div className="login-container">
+          <BiUserCircle size={50} color="var(--blue-light)" />
+          <a href="#">
+            Olá, Entre
+            <br />
+            ou cadastre-se
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Header/styles.css b/src/components/Header/styles.css
@@ -0,0 +1,64 @@
+.header-container {
+  width: 100%;
+  height: 9rem;
+  background-color: var(--blue-dark);
+  padding: 0 3.5rem;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  color: var(--blue-light);
+}
+
+.header-container .header-content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  height: 100%;
+  width: 100%;
+  max-width: 1200px;
+}
+
+.header-container .header-content .logo {
+  width: 10rem;
+}
+
+.header-container .header-content nav {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 50%;
+  margin: 0 auto;
+}
+
+.header-container .header-content a {
+  color: var(--blue-light);
+  font-size: 1.125rem;
+  font-weight: 700;
+  text-decoration: none !important;
+  transition: filter 0.3s;
+}
+
+.header-container .header-content a:hover,
+.header-container .header-content .login-container:hover {
+  filter: brightness(0.8);
+  cursor: pointer;
+}
+
+.header-container .header-content .login-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  transition: filter 0.3s;
+}
+
+.header-container .header-content .login-container a {
+  font-size: 1rem;
+  margin-left: 0.5rem;
+  filter: brightness(1);
+}
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+
+export function Home() {
+  return (
+    <div>
+      <h1>home</h1>
+    </div>
+  );
+}
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -0,0 +1,23 @@
+:root {
+  --blue-light: #d4f1f4;
+  --blue-dark: #05445e;
+  --gray-light: #eaeaea;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
+}
+
+html,
+body,
+#root,
+.App {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-height: 100vh;
+  width: 100%;
+}