From 6d1f955af17ecdf236ecc5c5e1e292315ec81222 Mon Sep 17 00:00:00 2001
From: Fernando Kawano <kawano.fer@gmail.com>
Date: Thu, 6 Jun 2024 17:18:49 -0300
Subject: [PATCH] chore(web): create a github corner icon

---
 apps/web/components/github-corner.tsx | 33 +++++++++++++++++++++++++++
 apps/web/components/header.tsx        |  8 +++----
 2 files changed, 36 insertions(+), 5 deletions(-)
 create mode 100644 apps/web/components/github-corner.tsx

diff --git a/apps/web/components/github-corner.tsx b/apps/web/components/github-corner.tsx
new file mode 100644
index 0000000..9979f63
--- /dev/null
+++ b/apps/web/components/github-corner.tsx
@@ -0,0 +1,33 @@
+const GithubCorner = () => {
+  return (
+    <svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true">
+      <defs>
+        <linearGradient id="grad1" x1="100%" y1="0%" x2="0%" y2="100%">
+          <stop offset="0%" style={{ stopColor: '#6171e5', stopOpacity: 1 }} />
+          <stop
+            offset="100%"
+            style={{ stopColor: '#251b91', stopOpacity: 1 }}
+          />
+        </linearGradient>
+      </defs>
+
+      {/* TRIANGLE */}
+      <path
+        d="M 0 0 L 250 250 L 250 0 Z"
+        fill="url(#grad1)"
+        stroke="#6171e5"
+        strokeWidth="5"
+        strokeLinecap="round"
+      ></path>
+
+      {/* GITHUB ICON */}
+      <path
+        fill="#fff"
+        transform="rotate(45 50 200)"
+        d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
+      />
+    </svg>
+  )
+}
+
+export default GithubCorner
diff --git a/apps/web/components/header.tsx b/apps/web/components/header.tsx
index 365b46a..61cea92 100644
--- a/apps/web/components/header.tsx
+++ b/apps/web/components/header.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
 import Image from 'next/image'
 import Link from 'next/link'
-import { Github } from 'lucide-react'
+import GithubCorner from './github-corner'
 
 export const Header = () => {
   return (
-    <nav className="container z-10 flex items-center justify-between p-5">
+    <nav className="container z-10 flex items-start justify-between p-5">
       <Link href="/">
         <Image
           src="/full-logo.png"
@@ -15,9 +15,7 @@ export const Header = () => {
         ></Image>
       </Link>
       <Link href="https://github.com/brunocroh/bolhadev.chat">
-        <h2 className="rounded-lg p-1 hover:bg-white hover:text-black">
-          <Github color="currentColor" />
-        </h2>
+        <GithubCorner />
       </Link>
     </nav>
   )