91 lines
3.6 KiB
TypeScript
91 lines
3.6 KiB
TypeScript
"use client"
|
||
|
||
import Link from "next/link"
|
||
import { ChevronRight, BookOpen, FileText } from "lucide-react"
|
||
import { Part } from "@/lib/book-data"
|
||
|
||
interface TableOfContentsProps {
|
||
parts: Part[]
|
||
}
|
||
|
||
export function TableOfContents({ parts }: TableOfContentsProps) {
|
||
return (
|
||
<section className="py-12 px-4">
|
||
<div className="max-w-2xl mx-auto">
|
||
{/* 区域标题 */}
|
||
<div className="flex items-center justify-between mb-6">
|
||
<h2 className="text-[var(--app-text-secondary)] text-sm font-medium">
|
||
全书目录
|
||
</h2>
|
||
<span className="text-[var(--app-text-tertiary)] text-xs">
|
||
共 {parts.length} 篇
|
||
</span>
|
||
</div>
|
||
|
||
{/* 章节列表 - iOS列表风格 */}
|
||
<div className="glass-card overflow-hidden mb-8">
|
||
{parts.map((part, index) => (
|
||
<Link
|
||
key={part.id}
|
||
href={`/chapters?part=${part.id}`}
|
||
className="block touch-feedback"
|
||
>
|
||
<div className={`list-item-ios ${index === 0 ? 'rounded-t-xl' : ''} ${index === parts.length - 1 ? 'rounded-b-xl border-b-0' : ''}`}>
|
||
<div className="flex items-center gap-4 flex-1 min-w-0">
|
||
{/* 序号标识 */}
|
||
<div className="w-10 h-10 rounded-xl bg-[var(--app-brand-light)] flex items-center justify-center flex-shrink-0">
|
||
<span className="text-[var(--app-brand)] font-bold text-sm">{part.number}</span>
|
||
</div>
|
||
|
||
{/* 内容 */}
|
||
<div className="flex-1 min-w-0">
|
||
<h3 className="text-white font-semibold text-base truncate mb-0.5">
|
||
{part.title}
|
||
</h3>
|
||
<p className="text-[var(--app-text-tertiary)] text-sm truncate">
|
||
{part.subtitle}
|
||
</p>
|
||
<p className="text-[var(--app-text-tertiary)] text-xs mt-1">
|
||
{part.chapters.length} 章 · {part.chapters.reduce((acc, c) => acc + c.sections.length, 0)} 节
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 箭头 */}
|
||
<ChevronRight className="w-5 h-5 text-[var(--app-text-tertiary)] flex-shrink-0" />
|
||
</div>
|
||
</Link>
|
||
))}
|
||
</div>
|
||
|
||
{/* 附加内容 - 序言和尾声 */}
|
||
<div className="grid grid-cols-2 gap-3">
|
||
<Link href="/chapters?section=preface" className="block touch-feedback">
|
||
<div className="glass-card p-4 h-full">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<BookOpen className="w-4 h-4 text-[var(--ios-blue)]" />
|
||
<span className="text-[var(--app-text-tertiary)] text-xs">序言</span>
|
||
</div>
|
||
<p className="text-white text-sm leading-relaxed text-ellipsis-2">
|
||
为什么我每天早上6点在Soul开播?
|
||
</p>
|
||
</div>
|
||
</Link>
|
||
|
||
<Link href="/chapters?section=epilogue" className="block touch-feedback">
|
||
<div className="glass-card p-4 h-full">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<FileText className="w-4 h-4 text-[var(--ios-purple)]" />
|
||
<span className="text-[var(--app-text-tertiary)] text-xs">尾声</span>
|
||
</div>
|
||
<p className="text-white text-sm leading-relaxed text-ellipsis-2">
|
||
努力不是关键，选择才是
|
||
</p>
|
||
</div>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|