Initial commit
This commit is contained in:
@@ -0,0 +1,24 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect } from "react"
|
||||
import { useAuth } from "@/lib/auth-context"
|
||||
import { useBookmarks } from "@/lib/bookmark-context"
|
||||
|
||||
interface ChapterReaderProgressProps {
|
||||
novelId: string
|
||||
chapterId: string
|
||||
chapterNumber: number
|
||||
}
|
||||
|
||||
export function ChapterReaderProgress({ novelId, chapterId, chapterNumber }: ChapterReaderProgressProps) {
|
||||
const { user } = useAuth()
|
||||
const { updateProgress } = useBookmarks()
|
||||
|
||||
useEffect(() => {
|
||||
if (user) {
|
||||
updateProgress(novelId, chapterId, chapterNumber)
|
||||
}
|
||||
}, [user, novelId, chapterId, chapterNumber, updateProgress])
|
||||
|
||||
return null
|
||||
}
|
||||
@@ -0,0 +1,135 @@
|
||||
"use client"
|
||||
|
||||
import { use, useMemo } from "react"
|
||||
import Link from "next/link"
|
||||
import { notFound } from "next/navigation"
|
||||
import { ChevronLeft, ChevronRight, List } from "lucide-react"
|
||||
import { getNovelBySlug, getChapter, getChaptersByNovelId, getCommentsByChapterId } from "@/lib/data"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { ReadingSettings } from "@/components/reading-settings"
|
||||
import { CommentSection } from "@/components/comment-section"
|
||||
import { TTSPlayer } from "@/components/tts-player"
|
||||
import { ChapterReaderProgress } from "./chapter-reader-progress"
|
||||
|
||||
export default function ChapterReaderPage({ params }: { params: Promise<{ slug: string; chapterId: string }> }) {
|
||||
const { slug, chapterId } = use(params)
|
||||
const chapterNumber = parseInt(chapterId, 10)
|
||||
const novel = getNovelBySlug(slug)
|
||||
|
||||
if (!novel || isNaN(chapterNumber)) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
const chapter = getChapter(novel.id, chapterNumber)
|
||||
const allChapters = getChaptersByNovelId(novel.id)
|
||||
const maxChapter = allChapters.length
|
||||
|
||||
if (!chapter) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
const comments = getCommentsByChapterId(chapter.id)
|
||||
const hasPrev = chapterNumber > 1
|
||||
const hasNext = chapterNumber < maxChapter
|
||||
|
||||
// Extract paragraphs for TTS
|
||||
const paragraphs = useMemo(
|
||||
() => chapter.content.split("\n").map((p) => p.trim()).filter(Boolean),
|
||||
[chapter.content]
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-3xl px-4 py-6">
|
||||
{/* Top navigation */}
|
||||
<div className="mb-6 flex flex-col gap-3">
|
||||
<Link href={`/truyen/${slug}`} className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors">
|
||||
<ChevronLeft className="h-4 w-4" /> {novel.title}
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<h1 className="text-lg font-bold text-foreground">
|
||||
Chương {chapter.number}: {chapter.title}
|
||||
</h1>
|
||||
<div className="flex items-center gap-2">
|
||||
<ReadingSettings />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Chapter navigation top */}
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
<Button variant="outline" size="sm" disabled={!hasPrev} asChild={hasPrev}>
|
||||
{hasPrev ? (
|
||||
<Link href={`/truyen/${slug}/${chapterNumber - 1}`}>
|
||||
<ChevronLeft className="mr-1 h-4 w-4" /> Ch. trước
|
||||
</Link>
|
||||
) : (
|
||||
<span><ChevronLeft className="mr-1 h-4 w-4" /> Ch. trước</span>
|
||||
)}
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" asChild>
|
||||
<Link href={`/truyen/${slug}`}>
|
||||
<List className="mr-1 h-4 w-4" /> Mục lục
|
||||
</Link>
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" disabled={!hasNext} asChild={hasNext}>
|
||||
{hasNext ? (
|
||||
<Link href={`/truyen/${slug}/${chapterNumber + 1}`}>
|
||||
Ch. sau <ChevronRight className="ml-1 h-4 w-4" />
|
||||
</Link>
|
||||
) : (
|
||||
<span>Ch. sau <ChevronRight className="ml-1 h-4 w-4" /></span>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Chapter content */}
|
||||
<article className="chapter-content mb-8 rounded-lg border border-border bg-card p-6 font-serif text-foreground/90 md:p-8">
|
||||
{paragraphs.map((text, idx) => (
|
||||
<p key={idx} data-p-index={idx} className="mb-4 last:mb-0">
|
||||
{text}
|
||||
</p>
|
||||
))}
|
||||
</article>
|
||||
|
||||
{/* Chapter navigation bottom */}
|
||||
<div className="mb-8 flex items-center justify-between">
|
||||
<Button variant="outline" size="sm" disabled={!hasPrev} asChild={hasPrev}>
|
||||
{hasPrev ? (
|
||||
<Link href={`/truyen/${slug}/${chapterNumber - 1}`}>
|
||||
<ChevronLeft className="mr-1 h-4 w-4" /> Chương trước
|
||||
</Link>
|
||||
) : (
|
||||
<span><ChevronLeft className="mr-1 h-4 w-4" /> Chương trước</span>
|
||||
)}
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" disabled={!hasNext} asChild={hasNext}>
|
||||
{hasNext ? (
|
||||
<Link href={`/truyen/${slug}/${chapterNumber + 1}`}>
|
||||
Chương sau <ChevronRight className="ml-1 h-4 w-4" />
|
||||
</Link>
|
||||
) : (
|
||||
<span>Chương sau <ChevronRight className="ml-1 h-4 w-4" /></span>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Save reading progress */}
|
||||
<ChapterReaderProgress novelId={novel.id} chapterId={chapter.id} chapterNumber={chapter.number} />
|
||||
|
||||
{/* Comments */}
|
||||
<section className="border-t border-border pt-8">
|
||||
<CommentSection comments={comments} novelId={novel.id} chapterId={chapter.id} />
|
||||
</section>
|
||||
|
||||
{/* TTS Player */}
|
||||
<TTSPlayer
|
||||
paragraphs={paragraphs}
|
||||
novelSlug={slug}
|
||||
currentChapter={chapterNumber}
|
||||
maxChapter={maxChapter}
|
||||
chapterTitle={`Chuong ${chapter.number}: ${chapter.title}`}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
"use client"
|
||||
|
||||
import Link from "next/link"
|
||||
import { BookOpen, BookMarked, BookmarkCheck } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { useAuth } from "@/lib/auth-context"
|
||||
import { useBookmarks } from "@/lib/bookmark-context"
|
||||
|
||||
interface NovelDetailActionsProps {
|
||||
novelId: string
|
||||
novelSlug: string
|
||||
firstChapterNumber?: number
|
||||
}
|
||||
|
||||
export function NovelDetailActions({ novelId, novelSlug, firstChapterNumber }: NovelDetailActionsProps) {
|
||||
const { user } = useAuth()
|
||||
const { isBookmarked, toggleBookmark, getProgress } = useBookmarks()
|
||||
|
||||
const bookmarked = isBookmarked(novelId)
|
||||
const progress = getProgress(novelId)
|
||||
|
||||
const readLink = progress?.lastChapterNumber
|
||||
? `/truyen/${novelSlug}/${progress.lastChapterNumber}`
|
||||
: firstChapterNumber
|
||||
? `/truyen/${novelSlug}/${firstChapterNumber}`
|
||||
: "#"
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap gap-2 pt-1">
|
||||
<Button asChild>
|
||||
<Link href={readLink}>
|
||||
<BookOpen className="mr-1.5 h-4 w-4" />
|
||||
{progress?.lastChapterNumber ? `Đọc tiếp Ch. ${progress.lastChapterNumber}` : "Đọc Truyện"}
|
||||
</Link>
|
||||
</Button>
|
||||
{user ? (
|
||||
<Button variant={bookmarked ? "secondary" : "outline"} onClick={() => toggleBookmark(novelId)}>
|
||||
{bookmarked ? <BookmarkCheck className="mr-1.5 h-4 w-4" /> : <BookMarked className="mr-1.5 h-4 w-4" />}
|
||||
{bookmarked ? "Đã Lưu" : "Lưu Truyện"}
|
||||
</Button>
|
||||
) : (
|
||||
<Button variant="outline" asChild>
|
||||
<Link href="/dang-nhap">
|
||||
<BookMarked className="mr-1.5 h-4 w-4" />
|
||||
Lưu Truyện
|
||||
</Link>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
"use client"
|
||||
|
||||
import { use } from "react"
|
||||
import { notFound } from "next/navigation"
|
||||
import { BookOpen, Eye, BookMarked, User, Clock, Layers } from "lucide-react"
|
||||
import { getNovelBySlug, getChaptersByNovelId, getCommentsByNovelId, genres, formatViews } from "@/lib/data"
|
||||
import { GenreBadge } from "@/components/genre-badge"
|
||||
import { StarRating } from "@/components/star-rating"
|
||||
import { ChapterList } from "@/components/chapter-list"
|
||||
import { CommentSection } from "@/components/comment-section"
|
||||
import { NovelDetailActions } from "./novel-detail-actions"
|
||||
|
||||
export default function NovelDetailPage({ params }: { params: Promise<{ slug: string }> }) {
|
||||
const { slug } = use(params)
|
||||
const novel = getNovelBySlug(slug)
|
||||
|
||||
if (!novel) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
const chapters = getChaptersByNovelId(novel.id)
|
||||
const comments = getCommentsByNovelId(novel.id)
|
||||
|
||||
const novelGenres = novel.genres
|
||||
.map((gSlug) => genres.find((g) => g.slug === gSlug))
|
||||
.filter(Boolean) as typeof genres
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-6xl px-4 py-6">
|
||||
{/* Novel Header */}
|
||||
<div className="flex flex-col gap-6 md:flex-row">
|
||||
{/* Cover */}
|
||||
<div className={`flex h-64 w-44 shrink-0 items-center justify-center self-center rounded-xl bg-gradient-to-br shadow-lg md:self-start ${novel.coverColor}`}>
|
||||
<BookOpen className="h-14 w-14 text-background/80" />
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div className="flex flex-1 flex-col gap-3">
|
||||
<h1 className="text-2xl font-bold text-foreground text-balance md:text-3xl">{novel.title}</h1>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground">
|
||||
<span className="flex items-center gap-1"><User className="h-3.5 w-3.5" />{novel.author}</span>
|
||||
<span className="flex items-center gap-1"><Layers className="h-3.5 w-3.5" />{novel.totalChapters} chương</span>
|
||||
<span className="flex items-center gap-1"><Eye className="h-3.5 w-3.5" />{formatViews(novel.views)} lượt xem</span>
|
||||
<span className="flex items-center gap-1"><BookMarked className="h-3.5 w-3.5" />{formatViews(novel.bookmarkCount)} bookmark</span>
|
||||
<span className="flex items-center gap-1"><Clock className="h-3.5 w-3.5" />Cập nhật: {novel.lastUpdated}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`rounded-full px-2.5 py-0.5 text-xs font-semibold ${
|
||||
novel.status === "Hoàn thành" ? "bg-green-500/10 text-green-600 dark:text-green-400" :
|
||||
novel.status === "Đang ra" ? "bg-primary/10 text-primary" :
|
||||
"bg-muted text-muted-foreground"
|
||||
}`}>
|
||||
{novel.status}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<StarRating rating={novel.rating} ratingCount={novel.ratingCount} interactive />
|
||||
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{novelGenres.map((g) => (
|
||||
<GenreBadge key={g.id} slug={g.slug} name={g.name} variant="link" />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<NovelDetailActions novelId={novel.id} novelSlug={novel.slug} firstChapterNumber={chapters[0]?.number} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<section className="mt-8">
|
||||
<h2 className="mb-3 text-lg font-bold text-foreground">Giới Thiệu</h2>
|
||||
<p className="text-sm leading-relaxed text-foreground/80">{novel.description}</p>
|
||||
</section>
|
||||
|
||||
{/* Chapter list */}
|
||||
<section className="mt-8">
|
||||
<h2 className="mb-3 text-lg font-bold text-foreground">Danh Sách Chương</h2>
|
||||
<div className="rounded-lg border border-border bg-card">
|
||||
<ChapterList chapters={chapters} novelSlug={novel.slug} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Comments */}
|
||||
<section className="mt-8">
|
||||
<CommentSection comments={comments} novelId={novel.id} />
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user