95 lines
3.7 KiB
TypeScript
95 lines
3.7 KiB
TypeScript
import Link from "next/link";
|
||
import { BookOpen, ChevronRight, Clock3 } from "lucide-react";
|
||
|
||
import { Badge } from "@/components/ui/Badge";
|
||
import type { ProjectResponse } from "@/lib/api/types";
|
||
import {
|
||
formatProjectUpdatedAt,
|
||
pendingReviewCount,
|
||
} from "@/lib/projects/projects";
|
||
import { cardClass, focusRing } from "@/lib/ui/variants";
|
||
|
||
interface ProjectCardProps {
|
||
project: ProjectResponse;
|
||
compact?: boolean;
|
||
}
|
||
|
||
// 作品卡（UX §6.1）：书名衬线大字、题材、一句话故事。
|
||
// M1 无字数/章数/待办统计端点 → 暂不展示该徽标（避免编造 API）。
|
||
export function ProjectCard({ project, compact = false }: ProjectCardProps) {
|
||
const pendingCount = pendingReviewCount(project);
|
||
const updatedLabel = formatProjectUpdatedAt(project.updated_at);
|
||
if (compact) {
|
||
return (
|
||
<Link
|
||
href={`/projects/${project.id}/write`}
|
||
className={cardClass(
|
||
`group flex items-center gap-3 p-3 transition-colors hover:border-cinnabar ${focusRing}`,
|
||
)}
|
||
>
|
||
<span className="flex h-9 w-9 shrink-0 items-center justify-center rounded bg-[var(--color-cinnabar-wash)] text-cinnabar">
|
||
<BookOpen className="h-4 w-4" aria-hidden="true" />
|
||
</span>
|
||
<span className="min-w-0 flex-1">
|
||
<span className="block truncate font-serif text-base text-ink">
|
||
〈{project.title || "未命名作品"}〉
|
||
</span>
|
||
<span className="mt-1 flex items-center gap-2 text-xs text-ink-soft">
|
||
{project.genre ? <Badge>{project.genre}</Badge> : null}
|
||
{pendingCount > 0 ? (
|
||
<Badge variant="warning">{pendingCount} 待审</Badge>
|
||
) : null}
|
||
<span className="truncate">{project.logline ?? "暂无一句话故事"}</span>
|
||
</span>
|
||
<span className="mt-1 block font-mono text-[11px] text-ink-soft">
|
||
最近编辑 {updatedLabel}
|
||
</span>
|
||
</span>
|
||
<ChevronRight
|
||
className="h-4 w-4 shrink-0 text-ink-soft transition-colors group-hover:text-cinnabar"
|
||
aria-hidden="true"
|
||
/>
|
||
</Link>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<Link
|
||
href={`/projects/${project.id}/write`}
|
||
className={cardClass(
|
||
`group flex h-full min-h-[176px] flex-col p-6 transition-colors hover:border-cinnabar ${focusRing}`,
|
||
)}
|
||
>
|
||
<div className="mb-4 flex items-start justify-between gap-3">
|
||
<div className="min-w-0">
|
||
<h2 className="truncate font-serif text-2xl text-ink">
|
||
〈{project.title || "未命名作品"}〉
|
||
</h2>
|
||
<div className="mt-2 flex flex-wrap gap-2">
|
||
{project.genre ? <Badge>{project.genre}</Badge> : null}
|
||
{pendingCount > 0 ? (
|
||
<Badge variant="warning">{pendingCount} 待审</Badge>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
<span className="rounded border border-line bg-bg p-2 text-ink-soft transition-colors group-hover:border-cinnabar group-hover:text-cinnabar">
|
||
<BookOpen className="h-4 w-4" aria-hidden="true" />
|
||
</span>
|
||
</div>
|
||
{project.logline ? (
|
||
<p className="line-clamp-3 text-sm leading-6 text-ink">
|
||
{project.logline}
|
||
</p>
|
||
) : null}
|
||
<span className="mt-3 flex items-center gap-1 font-mono text-[11px] text-ink-soft">
|
||
<Clock3 className="h-3.5 w-3.5" aria-hidden="true" />
|
||
最近编辑 {updatedLabel}
|
||
</span>
|
||
<span className="mt-auto flex items-center gap-1 pt-4 text-xs text-cinnabar opacity-0 motion-safe:transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100">
|
||
进入写作台
|
||
<ChevronRight className="h-3.5 w-3.5" aria-hidden="true" />
|
||
</span>
|
||
</Link>
|
||
);
|
||
}
|