dekun
79 lines
2.6 KiB
TypeScript
79 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { BookOpen, BrainCircuit, Compass, Lock, Sparkles } from "lucide-react";
|
|
import { ZenCard } from "@/components/ui/zen-card";
|
|
import { useAuth } from "@/components/auth/auth-provider";
|
|
|
|
const MODULES = [
|
|
{
|
|
href: "/learn",
|
|
title: "易经学习",
|
|
description: "64 卦卡片择读，繁体精简与简体图文",
|
|
icon: BookOpen,
|
|
accent: "from-amber-500/10 to-transparent",
|
|
protected: false,
|
|
},
|
|
{
|
|
href: "/liuyao",
|
|
title: "六爻算卦",
|
|
description: "三钱法起卦，卦辞 AI 智能解读",
|
|
icon: Sparkles,
|
|
accent: "from-stone-500/10 to-transparent",
|
|
protected: true,
|
|
},
|
|
{
|
|
href: "/bazi",
|
|
title: "生辰八字",
|
|
description: "四柱排盘，十神大运，AI 命理解读",
|
|
icon: BrainCircuit,
|
|
accent: "from-zinc-500/10 to-transparent",
|
|
protected: true,
|
|
},
|
|
{
|
|
href: "/combined",
|
|
title: "综合测算",
|
|
description: "天时地利人和，六爻可选",
|
|
icon: Compass,
|
|
accent: "from-neutral-500/10 to-transparent",
|
|
protected: true,
|
|
},
|
|
] as const;
|
|
|
|
export default function HomeModules() {
|
|
const { authEnabled, loggedIn } = useAuth();
|
|
|
|
return (
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
{MODULES.map(({ href, title, description, icon: Icon, accent, protected: locked }) => {
|
|
const needLogin = locked && authEnabled && !loggedIn;
|
|
const targetHref = needLogin ? `/login?next=${encodeURIComponent(href)}` : href;
|
|
|
|
return (
|
|
<Link key={href} href={targetHref} className="group block">
|
|
<ZenCard
|
|
className={`relative h-full bg-gradient-to-br ${accent} transition-all duration-300 group-hover:-translate-y-0.5 group-hover:shadow-md ${needLogin ? "opacity-90" : ""}`}
|
|
>
|
|
{needLogin && (
|
|
<span className="absolute right-3 top-3 text-muted-foreground">
|
|
<Lock size={16} />
|
|
</span>
|
|
)}
|
|
<div className="mb-3 flex items-center gap-3">
|
|
<span className="flex h-10 w-10 items-center justify-center rounded-full border border-border/60 bg-background/80">
|
|
<Icon size={20} className="text-primary/80" />
|
|
</span>
|
|
<span className="text-lg font-medium tracking-wide">{title}</span>
|
|
</div>
|
|
<p className="text-sm leading-relaxed text-muted-foreground">
|
|
{description}
|
|
{needLogin && "（登录后可用）"}
|
|
</p>
|
|
</ZenCard>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|