feat: add GitHub Star button to LeftHeader

app/_components/left-header.tsx

@@ -1,4 +1,5 @@
 import Image from "next/image";
+import GitHubButton from "react-github-btn";
 import Logo from "@/components/logo";
 
 export default function LeftHeader() {
@@ -16,21 +17,32 @@ export default function LeftHeader() {
                 </div>
             </div>
 
-            <a
-                href="https://buymeacoffee.com/ranitmanik"
-                target="_blank"
-                rel="noreferrer"
-                className="inline-flex shrink-0 items-center transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
-                aria-label="Support this project on Buy Me a Coffee"
-            >
-                <Image
-                    src="/bmc-button.png"
-                    alt="Buy Me a Coffee"
-                    width={140}
-                    height={39}
-                    className="h-auto w-35"
+            <div className="space-x-2">
+                <GitHubButton
+                    href="https://github.com/RanitManik/github-profile-readme-builder"
+                    data-color-scheme="no-preference: dark; light: dark; dark: dark;"
+                    data-size="large"
+                    data-show-count={true}
+                    data-text="Star"
+                    aria-label="Star RanitManik/github-profile-readme-builder on GitHub"
                 />
-            </a>
+
+                <a
+                    href="https://buymeacoffee.com/ranitmanik"
+                    target="_blank"
+                    rel="noreferrer"
+                    className="inline-flex h-7 items-center"
+                    aria-label="Support this project on Buy Me a Coffee"
+                >
+                    <Image
+                        src="/bmc-button.png"
+                        alt="Buy Me a Coffee"
+                        width={140}
+                        height={39}
+                        className="h-7 w-auto"
+                    />
+                </a>
+            </div>
         </nav>
     );
 }

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference path="./.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,9 +18,6 @@
         "typescript",
         "tailwind"
     ],
-    "engines": {
-        "node": ">=20.x"
-    },
     "license": "MIT",
     "type": "module",
     "scripts": {
@@ -51,6 +48,7 @@
         "react": "^19.0.0",
         "react-confetti": "6.4.0",
         "react-dom": "^19.0.0",
+        "react-github-btn": "1.4.0",
         "react-markdown": "^9.0.3",
         "rehype-highlight": "^7.0.2",
         "rehype-raw": "^7.0.0",

tsconfig.json

@@ -11,7 +11,7 @@
         "moduleResolution": "bundler",
         "resolveJsonModule": true,
         "isolatedModules": true,
-        "jsx": "preserve",
+        "jsx": "react-jsx",
         "incremental": true,
         "plugins": [
             {
@@ -22,6 +22,12 @@
             "@/*": ["./*"]
         }
     },
-    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+    "include": [
+        "next-env.d.ts",
+        "**/*.ts",
+        "**/*.tsx",
+        ".next/types/**/*.ts",
+        ".next/dev/types/**/*.ts"
+    ],
     "exclude": ["node_modules"]
 }