111 lines
5.2 KiB
TypeScript
111 lines
5.2 KiB
TypeScript
import { categoryLabels } from "@/lib/mock-data";
|
|
import { AppGrid, HeroSection, StatsPanel, 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, 6);
|
|
return (
|
|
<div className="space-y-8 py-6 md:space-y-10 md:py-8">
|
|
<ScrollReveal>
|
|
<HeroSection />
|
|
</ScrollReveal>
|
|
|
|
<ScrollReveal delay={0.02}>
|
|
<StatsPanel />
|
|
</ScrollReveal>
|
|
|
|
<section className="panel">
|
|
<div className="mb-3 flex items-center justify-between">
|
|
<h2 className="text-base font-semibold md:text-lg">热门分类</h2>
|
|
<Link href="/apps" className="text-xs text-cyan-300 md:text-sm">按分类浏览</Link>
|
|
</div>
|
|
<div className="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="space-y-3">
|
|
<div className="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>
|
|
<AppGrid apps={featured} />
|
|
</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-end 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="panel overflow-hidden p-0">
|
|
<div className="hidden grid-cols-12 border-b border-white/10 bg-slate-900/25 px-4 py-2 text-xs text-slate-400 md:grid">
|
|
<span className="col-span-6">资源信息</span>
|
|
<span className="col-span-2 text-center">版本</span>
|
|
<span className="col-span-2 text-center">大小</span>
|
|
<span className="col-span-2 text-center">更新日期</span>
|
|
</div>
|
|
{latest.slice(0, 8).map((app) => (
|
|
<Link
|
|
key={app.id}
|
|
href={`/apps/${app.slug}`}
|
|
className="grid gap-2 border-b border-white/10 px-4 py-3 transition hover:bg-white/5 last:border-b-0 md:grid-cols-12 md:items-center"
|
|
>
|
|
<div className="col-span-6 flex min-w-0 items-start gap-3 sm:items-center">
|
|
<span className="grid h-9 w-9 shrink-0 place-items-center rounded-lg border border-white/10 bg-slate-900/45 text-lg leading-none">{app.icon}</span>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate text-sm font-semibold">{app.name}</p>
|
|
<p className="truncate text-xs text-slate-400">{app.subtitle}</p>
|
|
</div>
|
|
</div>
|
|
<div className="col-span-6 grid grid-cols-3 pl-12 text-xs text-slate-300 sm:pl-0 md:text-sm">
|
|
<span className="text-center tabular-nums">{app.version}</span>
|
|
<span className="text-center tabular-nums">{app.size}</span>
|
|
<span className="text-center tabular-nums">{app.updatedAt}</span>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<aside className="min-w-0 space-y-4 lg:col-span-4">
|
|
<div className="panel">
|
|
<div className="mb-2 flex items-center justify-between">
|
|
<p className="text-sm font-semibold">下载热榜</p>
|
|
<span className="text-xs text-slate-400">按下载量</span>
|
|
</div>
|
|
<div className="space-y-2">
|
|
{latest.slice(0, 6).map((app, index) => (
|
|
<Link
|
|
key={app.id}
|
|
href={`/apps/${app.slug}`}
|
|
className="flex min-w-0 items-center justify-between gap-3 rounded-xl border border-white/10 bg-slate-900/20 px-3 py-2 text-xs text-slate-200 transition hover:border-cyan-300/30 hover:bg-slate-900/35"
|
|
>
|
|
<span className="flex min-w-0 items-center gap-2.5 truncate">
|
|
<span className="grid h-6 w-6 shrink-0 place-items-center rounded-full border border-cyan-300/35 bg-cyan-400/10 text-[10px] font-semibold text-cyan-200">
|
|
{String(index + 1).padStart(2, "0")}
|
|
</span>
|
|
<span className="truncate">{app.name}</span>
|
|
</span>
|
|
<span className="shrink-0 tabular-nums text-cyan-200">{app.downloads.toLocaleString()}</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</section>
|
|
|
|
<ScrollReveal delay={0.04}>
|
|
<UnlockSection />
|
|
</ScrollReveal>
|
|
</div>
|
|
);
|
|
}
|