88 lines
3.5 KiB
TypeScript
88 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { CardContent } from "@/components/ui/card";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { ArrowLeft, ArrowRight } from "lucide-react";
|
|
import { config, config_p2 } from "@/lib/config";
|
|
import { getCountForLink, formatCount, FollowerCounts } from "@/lib/followers";
|
|
|
|
export function LinkCard({ counts }: { counts: FollowerCounts }) {
|
|
const [isPage2, setIsPage2] = useState(false);
|
|
const currentConfig = isPage2 ? config_p2 : config;
|
|
|
|
return (
|
|
<CardContent>
|
|
<div key={isPage2 ? "p2" : "p1"} className="animate-in fade-in slide-in-from-bottom-2 duration-200">
|
|
<nav aria-label="ลิ้งค์โซเชียลมีเดีย" className="flex flex-col gap-3">
|
|
{currentConfig.links.map((item, index) => {
|
|
const isStringIcon = typeof item.icon === "string";
|
|
const IconComponent = !isStringIcon ? item.icon : null;
|
|
|
|
const count = getCountForLink(item.name, counts);
|
|
|
|
return (
|
|
<Button
|
|
key={index}
|
|
variant="outline"
|
|
className="w-full h-auto p-4 group md:bg-muted bg-black/40 "
|
|
asChild
|
|
>
|
|
<Link href={item.link} target={item.link.startsWith("/") ? undefined : "_blank"} rel={item.link.startsWith("/") ? undefined : "noopener noreferrer"} className="w-full">
|
|
<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">
|
|
{isStringIcon ? (
|
|
<Image
|
|
src={item.icon as string}
|
|
alt={`${item.name} icon`}
|
|
width={24}
|
|
height={24}
|
|
className="object-contain"
|
|
/>
|
|
) : (
|
|
IconComponent && <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>
|
|
{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 border-t border-zinc-800/50">
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => setIsPage2(false)}
|
|
disabled={!isPage2}
|
|
className="text-zinc-400 hover:text-white disabled:opacity-50"
|
|
>
|
|
<ArrowLeft />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => setIsPage2(true)}
|
|
disabled={isPage2}
|
|
className="text-zinc-400 hover:text-white disabled:opacity-50"
|
|
>
|
|
<ArrowRight />
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
);
|
|
}
|