feat(footer): add mastodon and bluesky links

Author: rogeriopvl

components/BlueskyButton/BlueskyButton.tsx

@@ -0,0 +1,28 @@
+import Image from 'next/image';
+
+import blueskyIcon from './bluesky.svg';
+
+type BlueskyButtonProps = {
+  width?: number;
+  height?: number;
+};
+
+const BlueskyButton = ({ width = 50, height = 50 }: BlueskyButtonProps) => (
+  <div>
+    <a
+      href="https://bsky.app/profile/http.cat"
+      target="_blank"
+      rel="me noopener noreferrer"
+      title="http.cat dev Bluesky"
+    >
+      <Image
+        src={blueskyIcon}
+        alt="Bluesky logo"
+        width={width}
+        height={height}
+      />
+    </a>
+  </div>
+);
+
+export default BlueskyButton;

components/BlueskyButton/bluesky.svg

@@ -0,0 +1 @@
+export { default } from './BlueskyButton';

components/BlueskyButton/index.ts

@@ -1,19 +1,18 @@
 import Image from 'next/image';
 
 import facebookIcon from './facebook.svg';
-import styles from './FacebookButton.module.css';
 
 type FacebookButtonProps = {
   width?: number;
   height?: number;
 };
 
 const FacebookButton = ({ width = 50, height = 50 }: FacebookButtonProps) => (
-  <div className={styles.container}>
+  <div>
     <a
       href="https://www.facebook.com/httpcats"
       target="_blank"
-      rel="noopener noreferrer"
+      rel="me noopener noreferrer"
       title="http.cat facebook page"
     >
       <Image

components/FacebookButton/FacebookButton.module.css

@@ -5,6 +5,8 @@ import { usePathname } from 'next/navigation';
 
 import FacebookButton from '@/components/FacebookButton';
 import GithubButton from '@/components/GithubButton';
+import BlueskyButton from '@/components/BlueskyButton';
+import MastodonButton from '@/components/MastodonButton';
 import TwitterButton from '@/components/TwitterButton';
 
 import styles from './Footer.module.css';
@@ -23,6 +25,8 @@ const Footer = ({ t }: FooterProps) => {
       <div className={styles.social}>
         <FacebookButton />
         <GithubButton />
+        <BlueskyButton />
+        <MastodonButton />
         <TwitterButton />
       </div>
 

components/FacebookButton/FacebookButton.tsx

@@ -1,19 +1,18 @@
 import Image from 'next/image';
 
 import githubIcon from './github.svg';
-import styles from './GithubButton.module.css';
 
 type GithubButtonProps = {
   width?: number;
   height?: number;
 };
 
 const GithubButton = ({ width = 50, height = 50 }: GithubButtonProps) => (
-  <div className={styles.container}>
+  <div>
     <a
       href="https://github.com/httpcats/http.cat"
       target="_blank"
-      rel="noopener noreferrer"
+      rel="me noopener noreferrer"
       title="http.cat github repository"
     >
       <Image src={githubIcon} alt="Github logo" width={width} height={height} />

components/Footer/Footer.tsx

@@ -0,0 +1,28 @@
+import Image from 'next/image';
+
+import mastodonIcon from './mastodon.svg';
+
+type MastodonButtonProps = {
+  width?: number;
+  height?: number;
+};
+
+const MastodonButton = ({ width = 50, height = 50 }: MastodonButtonProps) => (
+  <div>
+    <a
+      href="https://mastodon.social/@rogeriopvl"
+      target="_blank"
+      rel="me noopener noreferrer"
+      title="http.cat dev Bluesky"
+    >
+      <Image
+        src={mastodonIcon}
+        alt="Mastodon logo"
+        width={width}
+        height={height}
+      />
+    </a>
+  </div>
+);
+
+export default MastodonButton;

components/GithubButton/GithubButton.module.css

@@ -0,0 +1 @@
+export { default } from './MastodonButton';