82 lines
3.0 KiB
TypeScript
82 lines
3.0 KiB
TypeScript
"use client"
|
|
|
|
import { use, useState, useMemo } from "react"
|
|
import Link from "next/link"
|
|
import { ChevronLeft } from "lucide-react"
|
|
import { getGenreBySlug, getNovelsByGenre } from "@/lib/data"
|
|
import { NovelCard } from "@/components/novel-card"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|
import { notFound } from "next/navigation"
|
|
|
|
export default function GenreDetailPage({ params }: { params: Promise<{ slug: string }> }) {
|
|
const { slug } = use(params)
|
|
const genre = getGenreBySlug(slug)
|
|
|
|
if (!genre) {
|
|
notFound()
|
|
}
|
|
|
|
return <GenreContent genreName={genre.name} genreSlug={genre.slug} genreDescription={genre.description} />
|
|
}
|
|
|
|
function GenreContent({ genreName, genreSlug, genreDescription }: { genreName: string; genreSlug: string; genreDescription: string }) {
|
|
const [sortBy, setSortBy] = useState("latest")
|
|
const allNovels = getNovelsByGenre(genreSlug)
|
|
|
|
const sortedNovels = useMemo(() => {
|
|
const sorted = [...allNovels]
|
|
switch (sortBy) {
|
|
case "popular":
|
|
sorted.sort((a, b) => b.views - a.views)
|
|
break
|
|
case "rating":
|
|
sorted.sort((a, b) => b.rating - a.rating)
|
|
break
|
|
case "latest":
|
|
default:
|
|
sorted.sort((a, b) => new Date(b.lastUpdated).getTime() - new Date(a.lastUpdated).getTime())
|
|
}
|
|
return sorted
|
|
}, [allNovels, sortBy])
|
|
|
|
return (
|
|
<div className="mx-auto max-w-6xl px-4 py-6">
|
|
<div className="mb-6">
|
|
<Link href="/the-loai" className="mb-2 inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors">
|
|
<ChevronLeft className="h-4 w-4" /> Thể Loại
|
|
</Link>
|
|
<h1 className="text-2xl font-bold text-foreground">{genreName}</h1>
|
|
<p className="mt-1 text-sm text-muted-foreground">{genreDescription}</p>
|
|
</div>
|
|
|
|
<div className="mb-4 flex items-center justify-between">
|
|
<p className="text-sm text-muted-foreground">{sortedNovels.length} truyện</p>
|
|
<Select value={sortBy} onValueChange={setSortBy}>
|
|
<SelectTrigger className="w-40">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="latest">Mới nhất</SelectItem>
|
|
<SelectItem value="popular">Xem nhiều</SelectItem>
|
|
<SelectItem value="rating">Đánh giá cao</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{sortedNovels.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
|
|
<p className="text-lg font-medium">Chưa có truyện nào</p>
|
|
<p className="text-sm">Thể loại này chưa có truyện, hãy quay lại sau.</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
|
|
{sortedNovels.map((novel) => (
|
|
<NovelCard key={novel.id} novel={novel} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|