siujamo
ed72045f5e
- add prototype upload, list, view, and delete api routes - add prototype manager ui with search, modal, and theme toggle - add filesystem-backed zip extraction and serving logic - switch project to pnpm with updated lockfile and tooling - add multi-stage dockerfile with standalone next.js output - add github actions to lint, build, and publish docker images
56 lines
2.1 KiB
TypeScript
56 lines
2.1 KiB
TypeScript
import { PrototypeSummary } from "@/lib/prototype";
|
|
|
|
interface PrototypeCardProps {
|
|
prototype: PrototypeSummary;
|
|
onDelete?: (id: string) => Promise<void>;
|
|
}
|
|
|
|
export function PrototypeCard({ prototype, onDelete }: PrototypeCardProps) {
|
|
return (
|
|
<article className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm transition hover:-translate-y-1 hover:shadow-lg dark:border-slate-700 dark:bg-slate-900">
|
|
<div className="flex h-40 items-center justify-center bg-slate-100 text-6xl text-slate-400 dark:bg-slate-800 dark:text-slate-500">
|
|
<span aria-hidden>🧭</span>
|
|
</div>
|
|
|
|
<div className="space-y-4 p-6">
|
|
<div>
|
|
<h2 className="line-clamp-2 text-2xl font-semibold text-slate-900 dark:text-slate-50">
|
|
{prototype.name}
|
|
</h2>
|
|
{prototype.description ? (
|
|
<p className="mt-2 line-clamp-2 text-sm text-slate-600 dark:text-slate-300">
|
|
{prototype.description}
|
|
</p>
|
|
) : (
|
|
<p className="mt-2 text-sm text-slate-400 dark:text-slate-500">暂无描述</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="rounded-full bg-sky-50 px-3 py-1 text-xs text-sky-700 dark:bg-sky-500/20 dark:text-sky-200">
|
|
上传时间：{new Date(prototype.createdAt).toLocaleString()}
|
|
</div>
|
|
|
|
<div className="flex gap-3">
|
|
<a
|
|
href={prototype.viewUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex flex-1 items-center justify-center rounded-lg bg-sky-600 px-4 py-2.5 text-sm font-medium text-white transition hover:bg-sky-700"
|
|
>
|
|
查看原型
|
|
</a>
|
|
{onDelete ? (
|
|
<button
|
|
type="button"
|
|
onClick={() => onDelete(prototype.id)}
|
|
className="inline-flex items-center justify-center rounded-lg border border-red-200 px-4 py-2.5 text-sm font-medium text-red-600 transition hover:bg-red-50 dark:border-red-900 dark:text-red-300 dark:hover:bg-red-950/40"
|
|
>
|
|
删除
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|