52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { Card } from "@/components/ui/Card";
|
|
|
|
interface ChapterListProps {
|
|
chapters: any[];
|
|
onSeekToChapter: (startTime: number) => void;
|
|
formatTime: (seconds: number) => string;
|
|
}
|
|
|
|
export function ChapterList({
|
|
chapters,
|
|
onSeekToChapter,
|
|
formatTime,
|
|
}: ChapterListProps) {
|
|
// Hide if >50 chapters (likely multi-file audiobook)
|
|
if (!chapters || chapters.length === 0 || chapters.length > 50) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<section>
|
|
<h2 className="text-2xl md:text-3xl font-bold mb-6">Chapters</h2>
|
|
<Card className="p-6">
|
|
<div className="space-y-2">
|
|
{chapters.map((chapter: any, index: number) => (
|
|
<button
|
|
key={chapter.id}
|
|
onClick={() => onSeekToChapter(chapter.start)}
|
|
className="w-full text-left p-3 rounded-md hover:bg-[#1a1a1a] transition-colors group"
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<span className="text-sm text-gray-500 mr-2">
|
|
{index + 1}.
|
|
</span>
|
|
<span className="text-sm text-white group-hover:text-purple-400">
|
|
{chapter.title}
|
|
</span>
|
|
</div>
|
|
<span className="text-xs text-gray-500">
|
|
{formatTime(chapter.start)}
|
|
</span>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</Card>
|
|
</section>
|
|
);
|
|
}
|