first commit

app/dracin/[id]/page.tsx

@@ -0,0 +1,84 @@
+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>
+    );
+}