refactor: extract GitHub link into reusable GithubLink component and remove Icon usage (#112)

Author: BhathiyaVicum

components/app-footer.tsx

@@ -2,8 +2,7 @@
 
 import { useTranslation } from "@/components/language-provider";
 import { cn } from "@/lib/utils";
-import { Icon } from "./ui/button";
-import { FaGithub } from "react-icons/fa";
+import { GithubLink } from "./github-link";
 
 export function AppFooter() {
   const { t, dir } = useTranslation();
@@ -57,19 +56,7 @@ export function AppFooter() {
             >
               {t("footer.note")}
             </p>
-            <a href="https://github.com/O2sa/DevImpact"
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label="GitHub Repository">
-              <Icon
-                type="button"
-                variant="ghost"
-                size="sm"
-                className="flex items-center gap-2"
-              >
-                <FaGithub className="text-black dark:text-white" />
-              </Icon>
-            </a>
+            <GithubLink />
           </div>
         </div>
 

components/github-link.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { Button } from "./ui/button";
+import { FaGithub } from "react-icons/fa";
+
+export function GithubLink() {
+  return (
+    <a
+      href="https://github.com/O2sa/DevImpact"
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label="GitHub Repository"
+    >
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        className="flex items-center gap-2"
+      >
+        <FaGithub className="text-black dark:text-white" />
+      </Button>
+    </a>
+  );
+}

components/theme-toggle.tsx

@@ -2,10 +2,10 @@
 
 import { Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
-import { Button, Icon } from "./ui/button";
 import { useSyncExternalStore } from "react";
 import { useTranslation } from "./language-provider";
-import { FaGithub } from "react-icons/fa";
+import { Button } from "./ui/button";
+import { GithubLink } from "./github-link";
 
 const emptySubscribe = () => () => { };
 
@@ -44,19 +44,7 @@ export function ThemeToggle() {
       >
         {mounted && current === "dark" ? <Sun size={16} /> : <Moon size={16} />}
       </Button>
-      <a href="https://github.com/O2sa/DevImpact"
-        target="_blank"
-        rel="noopener noreferrer"
-        aria-label="GitHub Repository">
-        <Icon
-          type="button"
-          variant="ghost"
-          size="sm"
-          className="flex items-center gap-2"
-        >
-          <FaGithub className="text-black dark:text-white" />
-        </Icon>
-      </a>
+      <GithubLink />
 
 
     </div>

components/ui/button.tsx

@@ -37,13 +37,4 @@ export function Button({ className, variant, size, ...props }: ButtonProps) {
       {...props}
     />
   );
-}
-
-export function Icon({ className, variant, size, ...props }: ButtonProps) {
-  return (
-    <button
-      className={cn(buttonVariants({ variant, size }), className)}
-      {...props}
-    />
-  );
-}
+}