86 lines
3.8 KiB
TypeScript
86 lines
3.8 KiB
TypeScript
import { categoryLabels } from "@/lib/mock-data";
|
|
import { HeroSection, UnlockSection } from "@/components/sections";
|
|
import { ScrollReveal } from "@/components/scroll-reveal";
|
|
import { getApps } from "@/services/apps.service";
|
|
import Link from "next/link";
|
|
|
|
export default async function Home() {
|
|
const appResources = await getApps();
|
|
const latest = [...appResources].sort((a, b) => b.updatedAt.localeCompare(a.updatedAt));
|
|
const featured = appResources.filter((a) => a.featured).slice(0, 4);
|
|
return (
|
|
<div className="space-y-8 py-6">
|
|
<ScrollReveal>
|
|
<HeroSection />
|
|
</ScrollReveal>
|
|
|
|
<section className="border-y border-white/10 py-3">
|
|
<div className="-mx-1 flex flex-wrap items-center gap-2">
|
|
<span className="pill pill-active shrink-0">全部</span>
|
|
{Object.values(categoryLabels).map((label) => (
|
|
<span key={label} className="pill shrink-0">{label}</span>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="grid min-w-0 grid-cols-1 gap-6 lg:grid-cols-12">
|
|
<div className="min-w-0 lg:col-span-8">
|
|
<div className="mb-3 flex min-w-0 flex-wrap items-baseline justify-between gap-2">
|
|
<h2 className="section-title shrink-0">最新更新</h2>
|
|
<Link href="/apps" className="shrink-0 text-sm text-cyan-300">查看全部</Link>
|
|
</div>
|
|
<div className="divide-y divide-white/10 overflow-hidden rounded-xl border border-white/10">
|
|
{latest.slice(0, 8).map((app) => (
|
|
<Link
|
|
key={app.id}
|
|
href={`/apps/${app.slug}`}
|
|
className="flex min-w-0 flex-col gap-1 px-3 py-3 transition hover:bg-white/5 sm:flex-row sm:items-center sm:gap-3"
|
|
>
|
|
<div className="flex min-w-0 flex-1 items-start gap-3 sm:items-center">
|
|
<span className="shrink-0 text-lg leading-none">{app.icon}</span>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate text-sm font-medium">{app.name}</p>
|
|
<p className="truncate text-xs text-slate-400">{app.subtitle}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex shrink-0 flex-wrap items-center gap-x-3 gap-y-1 pl-9 text-xs text-slate-400 sm:pl-0">
|
|
<span className="hidden whitespace-nowrap sm:inline">{app.version}</span>
|
|
<span className="hidden whitespace-nowrap sm:inline">{app.size}</span>
|
|
<span className="whitespace-nowrap tabular-nums">{app.updatedAt}</span>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<aside className="min-w-0 space-y-4 lg:col-span-4">
|
|
<div className="rounded-xl border border-white/10 p-3">
|
|
<p className="text-sm font-medium">精选</p>
|
|
<div className="mt-2 space-y-2">
|
|
{featured.map((app) => (
|
|
<Link
|
|
key={app.id}
|
|
href={`/apps/${app.slug}`}
|
|
className="flex min-w-0 items-center justify-between gap-3 text-xs text-slate-300 hover:text-white"
|
|
>
|
|
<span className="min-w-0 truncate">{app.name}</span>
|
|
<span className="shrink-0 tabular-nums">{app.downloads.toLocaleString()}</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="rounded-xl border border-white/10 p-3 text-xs leading-relaxed text-slate-300">
|
|
<p>免费资源约 70%</p>
|
|
<p className="mt-1">解锁资源约 20%</p>
|
|
<p className="mt-1">会员资源约 10%</p>
|
|
</div>
|
|
</aside>
|
|
</section>
|
|
|
|
<ScrollReveal delay={0.04}>
|
|
<UnlockSection />
|
|
</ScrollReveal>
|
|
</div>
|
|
);
|
|
}
|