eric/gitlab-instance-0a899031_cnomadcna
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

s

Browse Source
This commit is contained in:
root
2026-06-07 15:57:47 +08:00
parent cd885f5fcd
commit 9de2465793
50 changed files with 4942 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
app/digital/components/Tools.tsx
View File

@@ -2,25 +2,45 @@
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="py-20 sm:py-28 dark:bg-slate-950">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<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="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">
<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="text-3xl font-bold tracking-tight sm:text-4xl">
<h2 className="dn-section-title text-3xl font-bold tracking-tight sm:text-4xl">
<span className="gradient-text">{t("title")}</span>
</h2>
<p className="mx-auto mt-4 max-w-2xl text-lg text-slate-600 dark:text-slate-400">
<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>
@@ -29,16 +49,22 @@ export default function Tools({ data }: ToolsProps) {
{categories.map((cat) => (
<div
key={cat.title}
className="card-hover group overflow-visible rounded-2xl border border-slate-100 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900"
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={`h-1.5 bg-gradient-to-r ${cat.color}`} />
<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="text-2xl">{cat.icon}</span>
<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={`rounded-full px-2 py-0.5 text-xs font-semibold ${cat.bg} ${cat.text}`}>
<span className={`dn-counter rounded-full px-2 py-0.5 text-xs font-semibold ${cat.bg} ${cat.text}`}>
{cat.tools.length}
</span>
</div>
@@ -49,7 +75,7 @@ export default function Tools({ data }: ToolsProps) {
href={tool.href}
target="_blank"
rel="noopener noreferrer"
className="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"
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 && (