85 lines
3.5 KiB
TypeScript
85 lines
3.5 KiB
TypeScript
import { getDracinDetail } from '@/lib/dramabox';
|
|
import Image from 'next/image';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import Link from 'next/link';
|
|
import { Button } from '@/components/ui/button';
|
|
import { PlayCircle } from 'lucide-react';
|
|
import DracinEpisodeList from '@/components/DracinEpisodeList';
|
|
import BookmarkButton from '@/components/BookmarkButton';
|
|
|
|
interface DracinDetailPageProps {
|
|
params: Promise<{ id: string }>;
|
|
}
|
|
|
|
export default async function DracinDetailPage({ params }: DracinDetailPageProps) {
|
|
const { id } = await params;
|
|
const { drama, chapters } = await getDracinDetail(id);
|
|
|
|
if (!drama) {
|
|
return <div className="pt-24 text-center text-white">Drama not found.</div>;
|
|
}
|
|
|
|
return (
|
|
<div className="pt-24 px-4 md:px-16 min-h-screen">
|
|
<div className="grid grid-cols-1 md:grid-cols-[300px_1fr] gap-8">
|
|
{/* Cover Image */}
|
|
<div className="relative aspect-[2/3] w-full max-w-[300px] mx-auto md:mx-0 rounded-lg overflow-hidden border border-gray-800 shadow-xl">
|
|
<Image
|
|
src={drama.cover || '/placeholder.png'}
|
|
alt={drama.name || 'Drama Cover'}
|
|
fill
|
|
className="object-cover"
|
|
priority
|
|
unoptimized
|
|
/>
|
|
</div>
|
|
|
|
{/* Details */}
|
|
<div className="space-y-6 text-white">
|
|
<div>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<h1 className="text-3xl font-bold">{drama.name}</h1>
|
|
<BookmarkButton
|
|
id={id}
|
|
type="dracin"
|
|
title={drama.name}
|
|
poster={drama.cover || ''}
|
|
/>
|
|
</div>
|
|
<div className="flex gap-2 mb-4 flex-wrap">
|
|
{drama.tags && drama.tags.map(tag => (
|
|
<Badge key={tag.tagId} variant="secondary" className="bg-gray-800">{tag.tagName}</Badge>
|
|
))}
|
|
</div>
|
|
|
|
{/* Episode List */}
|
|
<Card className="bg-[#141414] border-gray-800 text-white mt-4 mb-6">
|
|
<CardHeader>
|
|
<CardTitle>Episodes</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<DracinEpisodeList chapters={chapters} bookId={id} />
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<p className="text-gray-400">{drama.introduction}</p>
|
|
</div>
|
|
|
|
<div className="flex gap-8 text-sm text-gray-400 border-y border-gray-800 py-4">
|
|
<div>
|
|
<span className="block font-bold text-white mb-1">Chapters</span>
|
|
{drama.chapterCount}
|
|
</div>
|
|
<div>
|
|
<span className="block font-bold text-white mb-1">Views</span>
|
|
{drama.playCount.toLocaleString()}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|