From 1950216d662704df876fcf116bee0a6d05dffa7e Mon Sep 17 00:00:00 2001
From: Laercio Rios <contact@laerciorios.com>
Date: Tue, 27 Aug 2024 11:13:07 -0300
Subject: [PATCH] feat: add buy me a coffee button

---
 src/app/components/BuyMeACoffee/index.tsx     | 21 +++++++++++++
 .../components/BuyMeACoffee/styles.module.css | 30 +++++++++++++++++++
 src/app/components/Header/index.tsx           |  4 +++
 src/app/globals.css                           |  5 ++++
 src/app/i18n/locales/en.json                  | 11 ++++++-
 src/app/i18n/locales/pt.json                  | 11 ++++++-
 src/app/utils/contrants.ts                    |  6 ++++
 7 files changed, 86 insertions(+), 2 deletions(-)
 create mode 100644 src/app/components/BuyMeACoffee/index.tsx
 create mode 100644 src/app/components/BuyMeACoffee/styles.module.css
 create mode 100644 src/app/utils/contrants.ts

diff --git a/src/app/components/BuyMeACoffee/index.tsx b/src/app/components/BuyMeACoffee/index.tsx
new file mode 100644
index 0000000..943d7d4
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/app/components/BuyMeACoffee/styles.module.css b/src/app/components/BuyMeACoffee/styles.module.css
new file mode 100644
index 0000000..c6fc716
--- /dev/null
+++ b/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;
+}
diff --git a/src/app/components/Header/index.tsx b/src/app/components/Header/index.tsx
index e220796..a169397 100644
--- a/src/app/components/Header/index.tsx
+++ b/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>
diff --git a/src/app/globals.css b/src/app/globals.css
index 11175bc..8a2d3f2 100644
--- a/src/app/globals.css
+++ b/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;
+}
diff --git a/src/app/i18n/locales/en.json b/src/app/i18n/locales/en.json
index 62f2afb..d63f5c5 100644
--- a/src/app/i18n/locales/en.json
+++ b/src/app/i18n/locales/en.json
@@ -6,5 +6,14 @@
     "pt": {
       "label": "Portuguese"
     }
+  },
+  "components": {
+    "buyMeACoffee": {
+      "label": "Buy me a coffee"
+    }
+  },
+  "pages": {
+    "home": {},
+    "projects": {}
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/i18n/locales/pt.json b/src/app/i18n/locales/pt.json
index a98c863..32680b8 100644
--- a/src/app/i18n/locales/pt.json
+++ b/src/app/i18n/locales/pt.json
@@ -6,5 +6,14 @@
     "pt": {
       "label": "Português"
     }
+  },
+  "components": {
+    "buyMeACoffee": {
+      "label": "Buy me a coffee"
+    }
+  },
+  "pages": {
+    "home": {},
+    "projects": {}
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/utils/contrants.ts b/src/app/utils/contrants.ts
new file mode 100644
index 0000000..988a68f
--- /dev/null
+++ b/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/";