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 ( + + {t("components.buyMeACoffee.label")} + + + ); +} 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() {