feat: add buy me a coffee button

src/app/components/BuyMeACoffee/index.tsx

@@ -0,0 +1,21 @@
+import { useTranslation } from "react-i18next";
+import Typography from "../Typography";
+import styles from "./styles.module.css";
+import CoffeeSvg from "../../assets/icons/coffee.svg";
+import { BUY_ME_A_COFFEE_LINK } from "../../utils/contrants";
+
+export default function BuyMeACoffee() {
+  const { t } = useTranslation();
+
+  return (
+    <a
+      className={styles["buy_me_a_coffee-wrapper"]}
+      href={BUY_ME_A_COFFEE_LINK}
+      target="_blank"
+      rel="noreferrer"
+    >
+      <Typography variant="h4">{t("components.buyMeACoffee.label")}</Typography>
+      <CoffeeSvg className={styles["buy_me_a_coffee-icon"]} />
+    </a>
+  );
+}

src/app/components/BuyMeACoffee/styles.module.css

@@ -0,0 +1,30 @@
+.buy_me_a_coffee-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.25rem;
+  transition: color 0.2s ease-in-out;
+}
+
+.buy_me_a_coffee-wrapper:hover {
+  color: var(--secondary);
+}
+
+.buy_me_a_coffee-wrapper:hover svg path {
+  fill: var(--secondary);
+}
+
+.buy_me_a_coffee-wrapper svg {
+  width: 2rem;
+  height: 2rem;
+
+  @media (min-width: 768px) {
+    width: 3rem;
+    height: 3rem;
+  }
+}
+
+.buy_me_a_coffee-wrapper svg path {
+  fill: var(--primary);
+  transition: fill 0.2s ease-in-out;
+}

src/app/components/Header/index.tsx

@@ -1,3 +1,4 @@
+import BuyMeACoffee from "../BuyMeACoffee";
 import LanguageSwitch from "../LanguageSwitch";
 import styles from "./styles.module.css";
 import dynamic from "next/dynamic";
@@ -12,6 +13,9 @@ export default function Header() {
       <div className={styles["nav-wrapper"]}>
         <ul className={styles["header-side_left"]}></ul>
         <ul className={styles["header-side_right"]}>
+          <li>
+            <BuyMeACoffee />
+          </li>
           <li>
             <LanguageSwitch />
           </li>

src/app/globals.css

@@ -34,3 +34,8 @@ body {
   -webkit-font-smoothing: antialiased;
   transition: all 0.2s ease-in-out;
 }
+
+a {
+  color: var(--primary);
+  text-decoration: none;
+}

src/app/i18n/locales/en.json

@@ -6,5 +6,14 @@
     "pt": {
       "label": "Portuguese"
     }
+  },
+  "components": {
+    "buyMeACoffee": {
+      "label": "Buy me a coffee"
+    }
+  },
+  "pages": {
+    "home": {},
+    "projects": {}
   }
-}
+}

src/app/i18n/locales/pt.json

@@ -6,5 +6,14 @@
     "pt": {
       "label": "Português"
     }
+  },
+  "components": {
+    "buyMeACoffee": {
+      "label": "Buy me a coffee"
+    }
+  },
+  "pages": {
+    "home": {},
+    "projects": {}
   }
-}
+}

src/app/utils/contrants.ts

@@ -0,0 +1,6 @@
+export const BUY_ME_A_COFFEE_LINK =
+  "https://nubank.com.br/cobrar/p0bwm/66cddada-b67a-4a83-b8a6-ab2a9f585ce9";
+
+export const GITHUB_LINK = "https://github.com/LaercioSR/";
+
+export const LINKEDIN_LINK = "https://www.linkedin.com/in/laerciorios/";