feat(linktree):add donate link

components/LinkCard.tsx

@@ -8,7 +8,7 @@ import Link from "next/link";
 import { ArrowLeft, ArrowRight } from "lucide-react";
 import { LinkConfig, type IconName } from "@/lib/config";
 import { getCountForLink, formatCount, FollowerCounts } from "@/lib/followers/utils";
-import { RobloxIcon, DiscordIcon, TiktokIcon, YoutubeIcon, FormIcon } from "@/lib/icons";
+import { RobloxIcon, DiscordIcon, TiktokIcon, YoutubeIcon, FormIcon, DonateIcon } from "@/lib/icons";
 
 const iconMap: Record<IconName, ComponentType<SVGProps<SVGSVGElement>>> = {
   roblox: RobloxIcon,
@@ -16,6 +16,7 @@ const iconMap: Record<IconName, ComponentType<SVGProps<SVGSVGElement>>> = {
   tiktok: TiktokIcon,
   youtube: YoutubeIcon,
   form: FormIcon,
+  donate: DonateIcon,
 };
 
 export function LinkCard({ counts, links1, links2 }: { counts: FollowerCounts, links1: LinkConfig[], links2: LinkConfig[] }) {
@@ -28,6 +29,7 @@ export function LinkCard({ counts, links1, links2 }: { counts: FollowerCounts, l
         <nav aria-label="ลิ้งค์โซเชียลมีเดีย" className="flex flex-col gap-3">
           {currentLinks.map((item, index) => {
             const IconComponent = iconMap[item.icon];
+            const isDonate = item.icon === "donate";
 
             const count = getCountForLink(item.name, counts);
 
@@ -35,7 +37,7 @@ export function LinkCard({ counts, links1, links2 }: { counts: FollowerCounts, l
               <Button
                 key={index}
                 variant="outline"
-                className="w-full h-16 p-4 group md:bg-muted bg-black/60 "
+                className="w-full h-12 p-4 group md:bg-muted bg-black/60 "
                 asChild
               >
                 <Link href={item.link} target={item.link.startsWith("/") ? undefined : "_blank"} rel={item.link.startsWith("/") ? undefined : "noopener noreferrer"} >
@@ -49,7 +51,9 @@ export function LinkCard({ counts, links1, links2 }: { counts: FollowerCounts, l
                         {item.desc && <span className="text-xs text-zinc-400">{item.desc}</span>}
                       </div>
                     </div>
-                    {count !== null && (
+                    {isDonate ? (
+                      <span className="text-xs font-medium shrink-0 text-zinc-400">ขี้นจอ</span>
+                    ) : count !== null && (
                       <span className="text-xs font-medium shrink-0">
                         {formatCount(count.count)} 
                         <span className="text-zinc-400"> {count.label}</span>
@@ -82,4 +86,4 @@ export function LinkCard({ counts, links1, links2 }: { counts: FollowerCounts, l
       </div>
     </CardContent>
   );
-}
+}

lib/config.ts

@@ -1,4 +1,4 @@
-export type IconName = "roblox" | "discord" | "tiktok" | "youtube" | "form";
+export type IconName = "roblox" | "discord" | "tiktok" | "youtube" | "form" | "donate";
 
 export interface LinkConfig {
   name: string;
@@ -26,6 +26,12 @@ export const config = {
       desc: "โปรไฟล์กุเองน้อง",
       icon: "roblox",
     },
+    {
+      name: "Donate",
+      link: "https://easydonate.app/erikabombay",
+      desc: "โดเนทขึ้นจอ",
+      icon: "donate"
+    },
     {
       name: "Discord server",
       link: "https://discord.com/invite/3cZQbvW6cF",

lib/icons.tsx

@@ -1,4 +1,5 @@
 import type { ComponentType, SVGProps } from "react";
+import { FileText, HandHeart } from "lucide-react";
 
 type IconProps = SVGProps<SVGSVGElement>;
 
@@ -26,12 +27,6 @@ export const YoutubeIcon: ComponentType<IconProps> = (props) => (
   </svg>
 );
 
-export const FormIcon: ComponentType<IconProps> = (props) => (
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
-    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-    <polyline points="14 2 14 8 20 8" />
-    <line x1="16" y1="13" x2="8" y2="13" />
-    <line x1="16" y1="17" x2="8" y2="17" />
-    <polyline points="10 9 9 9 8 9" />
-  </svg>
-);
+export const FormIcon: ComponentType<IconProps> = (props) => <FileText {...props} />;
+
+export const DonateIcon: ComponentType<IconProps> = (props) => <HandHeart {...props} />;