Add GitHub icons to header and footer

components/app-footer.tsx

@@ -2,6 +2,8 @@
 
 import { useTranslation } from "@/components/language-provider";
 import { cn } from "@/lib/utils";
+import { Icon } from "./ui/button";
+import { FaGithub } from "react-icons/fa";
 
 export function AppFooter() {
   const { t, dir } = useTranslation();
@@ -55,6 +57,19 @@ 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>
           </div>
         </div>
 

components/app-header.tsx

@@ -15,4 +15,4 @@ export function AppHeader() {
       </div>
     </header>
   );
-}
+}

components/theme-toggle.tsx

@@ -2,11 +2,12 @@
 
 import { Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
-import { Button } from "./ui/button";
+import { Button, Icon } from "./ui/button";
 import { useSyncExternalStore } from "react";
 import { useTranslation } from "./language-provider";
+import { FaGithub } from "react-icons/fa";
 
-const emptySubscribe = () => () => {};
+const emptySubscribe = () => () => { };
 
 export function ThemeToggle() {
   const { t } = useTranslation();
@@ -32,15 +33,35 @@ export function ThemeToggle() {
   };
 
   return (
-    <Button
-      type="button"
-      variant="ghost"
-      size="sm"
-      onClick={handleToggle}
-      className="flex items-center gap-2"
-      aria-label={t("theme.toggle")}
-    >
-      {mounted && current === "dark" ? <Sun size={16} /> : <Moon size={16} />}
-    </Button>
+    <div className="flex items-center">
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        onClick={handleToggle}
+        className="flex items-center gap-2"
+        aria-label={t("theme.toggle")}
+      >
+        {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>
+
+
+    </div>
+
+
+
   );
 }

components/ui/button.tsx

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

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package.json

@@ -18,6 +18,7 @@
     "radix-ui": "^1.4.3",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
+    "react-icons": "^5.6.0",
     "recharts": "^2.12.7",
     "tailwind-merge": "^2.5.3"
   },