99 lines
4.2 KiB
TypeScript
99 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import { useTranslation } from "@/app/digital/i18n/navigation";
|
|
import type { ToolsCategory } from "@/app/digital/lib/theme-data";
|
|
import DigitalThemeIcon, { type IconName } from "./DigitalThemeIcon";
|
|
|
|
type ToolsProps = {
|
|
data: { categories: ToolsCategory[] };
|
|
};
|
|
|
|
const categoryIconNames: Record<string, IconName> = {
|
|
"nomad-community": "user",
|
|
toolbox: "tool",
|
|
"us-phone": "phone",
|
|
finance: "card",
|
|
vps: "server",
|
|
"residential-ip": "globe",
|
|
"residential-vps": "home",
|
|
hardware: "tool",
|
|
software: "spark",
|
|
"digital-gear": "camera",
|
|
tiktok: "music",
|
|
youtube: "play",
|
|
web: "globe",
|
|
"live-stream": "video",
|
|
payment: "wallet",
|
|
forum: "file",
|
|
};
|
|
|
|
export default function Tools({ data }: ToolsProps) {
|
|
const categories = data.categories;
|
|
const { t } = useTranslation("tools");
|
|
return (
|
|
<section id="tools" className="dn-section dn-tools py-20 sm:py-28 dark:bg-slate-950">
|
|
<div className="dn-container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center">
|
|
<div className="dn-badge mb-4 inline-flex items-center gap-2 rounded-full border border-sky-200 bg-sky-50 px-4 py-1.5 text-sm font-medium text-sky-700 dark:border-sky-800 dark:bg-sky-900/50 dark:text-sky-300">
|
|
{t("badge")}
|
|
</div>
|
|
<h2 className="dn-section-title text-3xl font-bold tracking-tight sm:text-4xl">
|
|
<span className="gradient-text">{t("title")}</span>
|
|
</h2>
|
|
<p className="dn-section-copy mx-auto mt-4 max-w-2xl text-lg text-slate-600 dark:text-slate-400">
|
|
{t("subtitle")}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-14 grid gap-5 overflow-visible sm:grid-cols-2 lg:grid-cols-4">
|
|
{categories.map((cat) => (
|
|
<div
|
|
key={cat.title}
|
|
className="dn-card dn-tool-card card-hover group overflow-visible rounded-2xl border border-slate-100 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900"
|
|
>
|
|
<div className={`dn-card-accent h-1.5 bg-gradient-to-r ${cat.color}`} />
|
|
<div className="p-5">
|
|
<div className="mb-3 flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<span className="dn-icon-box dn-tool-icon flex h-9 w-9 items-center justify-center rounded-lg text-2xl">
|
|
<DigitalThemeIcon
|
|
name={categoryIconNames[cat.id] ?? "tool"}
|
|
emoji={cat.icon}
|
|
className="h-5 w-5"
|
|
/>
|
|
</span>
|
|
<h3 className="font-bold text-slate-900 dark:text-slate-100">{cat.title}</h3>
|
|
</div>
|
|
<span className={`dn-counter rounded-full px-2 py-0.5 text-xs font-semibold ${cat.bg} ${cat.text}`}>
|
|
{cat.tools.length}
|
|
</span>
|
|
</div>
|
|
<div className="space-y-2">
|
|
{cat.tools.map((tool) => (
|
|
<a
|
|
key={tool.name}
|
|
href={tool.href}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="dn-tool-link group/item flex items-center justify-between rounded-lg bg-slate-50 px-3 py-2 text-sm transition-colors hover:bg-slate-100/80 hover:text-sky-600 dark:bg-slate-800 dark:hover:bg-slate-700 dark:hover:text-sky-400"
|
|
>
|
|
<span className="font-medium text-slate-700 dark:text-slate-300">{tool.name}</span>
|
|
{tool.desc && (
|
|
<span className="relative shrink-0">
|
|
<span className="pointer-events-none absolute bottom-full right-0 z-10 mb-1 w-max max-w-[90vw] whitespace-normal break-words rounded-lg bg-slate-800 px-3 py-2 text-xs text-white opacity-0 shadow-lg transition-opacity group-hover/item:opacity-100">
|
|
{tool.desc}
|
|
</span>
|
|
</span>
|
|
)}
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|