46 lines
1.5 KiB
TypeScript
46 lines
1.5 KiB
TypeScript
import { notFound } from 'next/navigation';
|
|
import SkinViewer3D from '@/components/skins/SkinViewer3D';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
interface SkinDetailProps {
|
|
params: { id: string };
|
|
}
|
|
|
|
export default function SkinDetail({ params }: SkinDetailProps) {
|
|
// 实际应用中这里会从API获取皮肤数据
|
|
const skinData = {
|
|
id: params.id,
|
|
name: `皮肤 #${params.id}`,
|
|
description: '这是你的Minecraft角色皮肤',
|
|
createdAt: '2023-06-01',
|
|
downloadUrl: `/api/skins/${params.id}/download`,
|
|
};
|
|
|
|
if (!skinData) return notFound();
|
|
|
|
return (
|
|
<div className="max-w-4xl mx-auto">
|
|
<h1 className="text-3xl font-bold mb-6">{skinData.name}</h1>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
<div className="bg-gray-100 dark:bg-gray-800 rounded-lg p-4">
|
|
<SkinViewer3D skinUrl={skinData.downloadUrl} />
|
|
</div>
|
|
|
|
<div>
|
|
<p className="mb-4">{skinData.description}</p>
|
|
<p className="text-gray-500 mb-6">创建于: {skinData.createdAt}</p>
|
|
|
|
<div className="flex gap-3">
|
|
<Button asChild>
|
|
<a href={skinData.downloadUrl} download>下载皮肤</a>
|
|
</Button>
|
|
<Button variant="outline">
|
|
分享
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |