refactor : remove one time used componenets file

app/page.tsx

@@ -1,20 +1,109 @@
-import { config } from "@/lib/config";
+import type { ComponentType, SVGProps } from "react";
+import { config, type IconName, type LinkConfig } from "@/lib/config";
 import { Card, CardHeader } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
 import Image from "next/image";
+import Link from "next/link";
 import { Finger_Paint } from "next/font/google";
 import { getFollowerCounts } from "@/lib/followers";
-import { LinkCard } from "@/components/LinkCard";
 import { headers } from "next/headers";
-import { Users } from "lucide-react";
+import { Trophy, Users } from "lucide-react";
 import { Kbd } from "@/components/ui/kbd";
 import Background from "@/public/background/space.webp";
 import { trackUniqueVisitor } from "@/lib/visitor/unique-visitors";
+import {
+  formatCount,
+  getCountForLink,
+  type FollowerCounts,
+} from "@/lib/followers/utils";
+import {
+  DiscordIcon,
+  DonateIcon,
+  FormIcon,
+  RobloxIcon,
+  TiktokIcon,
+  YoutubeIcon,
+} from "@/lib/icons";
+import { LinkCarousel } from "./client";
 
 const fingerPaint = Finger_Paint({
   weight: "400",
   subsets: ["latin"],
 });
 
+const iconMap: Record<IconName, ComponentType<SVGProps<SVGSVGElement>>> = {
+  roblox: RobloxIcon,
+  discord: DiscordIcon,
+  tiktok: TiktokIcon,
+  youtube: YoutubeIcon,
+  form: FormIcon,
+  donate: DonateIcon,
+  leaderboard: Trophy,
+};
+
+function LinkList({
+  counts,
+  label,
+  links,
+}: {
+  counts: FollowerCounts;
+  label: string;
+  links: readonly LinkConfig[];
+}) {
+  return (
+    <nav aria-label={label} className="flex flex-col gap-3">
+      {links.map((item) => {
+        const IconComponent = iconMap[item.icon];
+        const count = getCountForLink(item.name, counts);
+        const external = !item.link.startsWith("/");
+
+        return (
+          <Button
+            key={item.link}
+            variant="outline"
+            className="group h-12 w-full justify-start p-4"
+            asChild
+          >
+            <Link
+              href={item.link}
+              target={external ? "_blank" : undefined}
+              rel={external ? "noopener noreferrer" : undefined}
+            >
+              <span className="flex w-full items-center justify-between gap-3">
+                <span className="flex min-w-0 items-center gap-3">
+                  <span className="flex size-4 shrink-0">
+                    <IconComponent className="size-5 text-muted-foreground" />
+                  </span>
+                  <span className="flex min-w-0 flex-col items-start text-left">
+                    <span className="truncate font-medium text-foreground">
+                      {item.name}
+                    </span>
+                    {item.desc && (
+                      <span className="truncate text-xs text-muted-foreground">
+                        {item.desc}
+                      </span>
+                    )}
+                  </span>
+                </span>
+                {item.icon === "donate" ? (
+                  <span className="shrink-0 text-xs font-medium text-muted-foreground">
+                    ขึ้นจอ 10 บาท+
+                  </span>
+                ) : count !== null ? (
+                  <span className="shrink-0 text-xs font-medium">
+                    {formatCount(count.count)}{" "}
+                    <span className="text-muted-foreground">{count.label}</span>
+                  </span>
+                ) : null}
+              </span>
+            </Link>
+          </Button>
+        );
+      })}
+    </nav>
+  );
+}
+
 export default async function Home() {
   const visitorCountPromise = headers()
     .then(trackUniqueVisitor)
@@ -87,7 +176,16 @@ export default async function Home() {
           </div>
         </CardHeader>
 
-        <LinkCard counts={counts} links1={links1} links2={config.secondaryLinks} />
+        <LinkCarousel
+          primary={<LinkList counts={counts} label="ลิงก์หลัก" links={links1} />}
+          secondary={
+            <LinkList
+              counts={counts}
+              label="ลิงก์เพิ่มเติม"
+              links={config.secondaryLinks}
+            />
+          }
+        />
       </Card>
     </main>
   );