feat: created SignInButton and styled it

package.json

@@ -12,6 +12,7 @@
     "next": "11.1.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-icons": "^4.3.1",
     "sass": "^1.44.0"
   },
   "devDependencies": {

src/components/Header/index.tsx

@@ -1,3 +1,4 @@
+import { SignInButton } from "../SignInButton";
 import styles from "./styles.module.scss";
 
 export function Header() {
@@ -9,6 +10,7 @@ export function Header() {
           <a className={styles.active}>Home</a>
           <a>Posts</a>
         </nav>
+        <SignInButton />
       </div>
     </header>
   );

src/components/Header/styles.module.scss

@@ -50,4 +50,8 @@
       }
     }
   }
+
+  button {
+    margin-left: auto;
+  }
 }

src/components/SignInButton/index.tsx

@@ -0,0 +1,20 @@
+import { FaGithub } from "react-icons/fa";
+import { FiX } from "react-icons/fi";
+
+import styles from "./styles.module.scss";
+
+export function SignInButton() {
+  const isUserLoggedIn = true;
+  return isUserLoggedIn ? (
+    <button type="button" className={styles.signInButton}>
+      <FaGithub color="#04d361" />
+      Marcos Paulo
+      <FiX color="#737388" className={styles.closeIcon} />
+    </button>
+  ) : (
+    <button type="button" className={styles.signInButton}>
+      <FaGithub color="#eba417" />
+      Sign In with Github
+    </button>
+  );
+}

src/components/SignInButton/styles.module.scss

@@ -0,0 +1,33 @@
+.signInButton {
+  height: 3rem;
+  border-radius: 3rem;
+  background: var(--gray-850);
+  border: 0;
+  padding: 0 1.5rem;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  color: var(--white);
+  font-weight: bold;
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  svg:first-child {
+    margin-right: 1rem;
+  }
+
+  svg.closeIcon {
+    margin-left: 1rem;
+  }
+
+  transition: filter 0.2s;
+
+  &:hover {
+    filter: brightness(0.8);
+  }
+}

src/styles/global.scss

@@ -9,6 +9,7 @@
   --gray-100: #e1e1e6;
   --gray-300: #a8a8b3;
   --gray-800: #29292e;
+  --gray-850: #1f2729;
   --gray-900: #121214;
 
   --cyan-500: #61bafb;

yarn.lock

@@ -2543,6 +2543,11 @@ [email protected]:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-icons@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.3.1.tgz#2fa92aebbbc71f43d2db2ed1aed07361124e91ca"
+  integrity sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==
+
 [email protected]:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"