91 lines
3.6 KiB
TypeScript
91 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import type { ComponentType, SVGProps } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { CardContent } from "@/components/ui/card";
|
|
import Link from "next/link";
|
|
import { ArrowLeft, ArrowRight, Trophy } from "lucide-react";
|
|
import { LinkConfig, type IconName } from "@/lib/config";
|
|
import { getCountForLink, formatCount, FollowerCounts } from "@/lib/followers/utils";
|
|
import { RobloxIcon, DiscordIcon, TiktokIcon, YoutubeIcon, FormIcon, DonateIcon } from "@/lib/icons";
|
|
|
|
const iconMap: Record<IconName, ComponentType<SVGProps<SVGSVGElement>>> = {
|
|
roblox: RobloxIcon,
|
|
discord: DiscordIcon,
|
|
tiktok: TiktokIcon,
|
|
youtube: YoutubeIcon,
|
|
form: FormIcon,
|
|
donate: DonateIcon,
|
|
leaderboard: Trophy,
|
|
};
|
|
|
|
export function LinkCard({ counts, links1, links2 }: { counts: FollowerCounts, links1: LinkConfig[], links2: LinkConfig[] }) {
|
|
const [isPage2, setIsPage2] = useState(false);
|
|
const currentLinks = isPage2 ? links2 : links1;
|
|
|
|
return (
|
|
<CardContent>
|
|
<div key={isPage2 ? "p2" : "p1"} className="animate-in fade-in slide-in-from-bottom-2 duration-150">
|
|
<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);
|
|
|
|
return (
|
|
<Button
|
|
key={index}
|
|
variant="outline"
|
|
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"} >
|
|
<div className="flex items-center justify-between w-full">
|
|
<div className="flex items-center gap-3">
|
|
<div className="shrink-0 w-8 h-8 flex items-center justify-center">
|
|
<IconComponent className="w-6 h-6 text-zinc-300" />
|
|
</div>
|
|
<div className="flex flex-col items-start text-left">
|
|
<span className="font-medium text-zinc-100">{item.name}</span>
|
|
{item.desc && <span className="text-xs text-zinc-400">{item.desc}</span>}
|
|
</div>
|
|
</div>
|
|
{isDonate ? (
|
|
<span className="text-xs font-medium shrink-0 text-zinc-400">ขี้นจอ 10 บาท+</span>
|
|
) : count !== null && (
|
|
<span className="text-xs font-medium shrink-0">
|
|
{formatCount(count.count)}
|
|
<span className="text-zinc-400"> {count.label}</span>
|
|
</span>
|
|
)}
|
|
</div>
|
|
</Link>
|
|
</Button>
|
|
);
|
|
})}
|
|
</nav>
|
|
</div>
|
|
<div className="flex justify-between items-center pt-4">
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => setIsPage2(false)}
|
|
disabled={!isPage2}
|
|
aria-label="หน้าก่อนหน้า"
|
|
>
|
|
<ArrowLeft />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => setIsPage2(true)}
|
|
disabled={isPage2}
|
|
aria-label="หน้าถัดไป"
|
|
>
|
|
<ArrowRight />
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
);
|
|
}
|