Add sponsor button

components/Links.tsx

@@ -4,6 +4,8 @@ import {
   CodeBracketIcon,
 } from "@heroicons/react/24/outline";
 import SidebarItem from "./SidebarItem";
+import SponsorButton from "./SponsorButton";
+import Stack from "./Stack";
 
 export const LINKS = [
   {
@@ -24,19 +26,23 @@ export const LINKS = [
 ];
 
 const Links = () => (
-  <ul className="mt-3 w-full">
-    {LINKS.map((LINK) => (
-      <SidebarItem
-        key={LINK.label}
-        href={LINK.href}
-        icon={LINK.icon}
-        target="_blank"
-        rel="noopener"
-      >
-        {LINK.label}
-      </SidebarItem>
-    ))}
-  </ul>
+  <Stack direction="vertical" spacing="large" className="mt-3">
+    <ul className="w-full">
+      {LINKS.map((LINK) => (
+        <SidebarItem
+          key={LINK.label}
+          href={LINK.href}
+          icon={LINK.icon}
+          target="_blank"
+          rel="noopener"
+        >
+          {LINK.label}
+        </SidebarItem>
+      ))}
+    </ul>
+
+    <SponsorButton />
+  </Stack>
 );
 
 export default Links;

components/SponsorButton.tsx

@@ -0,0 +1,21 @@
+import { HeartIcon } from "@heroicons/react/20/solid";
+import classNames from "../lib/classNames";
+
+export default function SponsorButton() {
+  return (
+    <a
+      target="_blank"
+      rel="noopener noreferrer"
+      href="https://github.com/sponsors/albingroen"
+      className={classNames(
+        "text-center w-full select-none font-medium rounded-md py-2 px-4 text-sm relative disabled:opacity-50 flex items-center justify-center gap-2",
+        "focus:outline-none focus-visible:ring-1",
+        "bg-gray-900 hover:bg-gray-700 text-white focus-visible:ring-white focus-visible:bg-gray-700",
+        "dark:bg-white dark:hover:bg-neutral-200 dark:text-black dark:focus-visible:ring-white dark:focus-visible:bg-neutral-200"
+      )}
+    >
+      <span>Sponsor the developer</span>
+      <HeartIcon className="w-4 text-red-500" />
+    </a>
+  );
+}