66 lines
2.9 KiB
TypeScript
66 lines
2.9 KiB
TypeScript
|
"use client"
|
||
|
|
|
||
|
|
import Link from "next/link"
|
||
|
|
import { ChevronRight } from "lucide-react"
|
||
|
|
import { Part } from "@/lib/book-data"
|
||
|
|
|
||
|
|
interface TableOfContentsProps {
|
||
|
|
parts: Part[]
|
||
|
|
}
|
||
|
|
|
||
|
|
export function TableOfContents({ parts }: TableOfContentsProps) {
|
||
|
|
return (
|
||
|
|
<section className="py-16 px-4">
|
||
|
|
<div className="max-w-2xl mx-auto">
|
||
|
|
{/* Section title */}
|
||
|
|
<h2 className="text-gray-400 text-sm mb-8">全书 {parts.length} 篇</h2>
|
||
|
|
|
||
|
|
{/* Parts list */}
|
||
|
|
<div className="space-y-6">
|
||
|
|
{parts.map((part) => (
|
||
|
|
<Link key={part.id} href={`/chapters?part=${part.id}`} className="block group">
|
||
|
|
<div className="bg-[#0f2137]/60 backdrop-blur-md rounded-xl p-6 border border-transparent hover:border-[#38bdac]/30 transition-all duration-300">
|
||
|
|
<div className="flex items-start justify-between">
|
||
|
|
<div className="flex gap-4">
|
||
|
|
<span className="text-[#38bdac] font-mono text-lg">{part.number}</span>
|
||
|
|
<div>
|
||
|
|
<h3 className="text-white text-xl font-semibold mb-1 group-hover:text-[#38bdac] transition-colors">
|
||
|
|
{part.title}
|
||
|
|
</h3>
|
||
|
|
<p className="text-gray-400">{part.subtitle}</p>
|
||
|
|
<p className="text-gray-500 text-sm mt-2">
|
||
|
|
{part.chapters.length} 章 · {part.chapters.reduce((acc, c) => acc + c.sections.length, 0)} 节
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<ChevronRight className="w-5 h-5 text-gray-500 group-hover:text-[#38bdac] transition-colors" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Additional content */}
|
||
|
|
<div className="mt-8 pt-8 border-t border-gray-700/50">
|
||
|
|
<div className="grid grid-cols-2 gap-4">
|
||
|
|
<Link href="/chapters?section=preface" className="block group">
|
||
|
|
<div className="bg-[#0f2137]/40 backdrop-blur-md rounded-xl p-4 border border-transparent hover:border-[#38bdac]/30 transition-all">
|
||
|
|
<p className="text-gray-400 text-sm">序言</p>
|
||
|
|
<p className="text-white group-hover:text-[#38bdac] transition-colors">
|
||
|
|
为什么我每天早上6点在Soul开播?
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
<Link href="/chapters?section=epilogue" className="block group">
|
||
|
|
<div className="bg-[#0f2137]/40 backdrop-blur-md rounded-xl p-4 border border-transparent hover:border-[#38bdac]/30 transition-all">
|
||
|
|
<p className="text-gray-400 text-sm">尾声</p>
|
||
|
|
<p className="text-white group-hover:text-[#38bdac] transition-colors">努力不是关键,选择才是</p>
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
)
|
||
|
|
}
|