111 lines
3.2 KiB
TypeScript
111 lines
3.2 KiB
TypeScript
import { useTranslation } from "react-i18next";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { cn } from "@/lib/cn";
|
|
import type { WorldListItem, WorldStatus } from "@/types";
|
|
import { Button } from "@/components/ui/Button";
|
|
|
|
export interface WorldCardProps {
|
|
world: WorldListItem;
|
|
onDelete?: (world: WorldListItem) => void;
|
|
className?: string;
|
|
}
|
|
|
|
const STATUS_BADGE: Record<WorldStatus, string> = {
|
|
draft: "bg-warn/15 text-warn",
|
|
building: "bg-accent/15 text-accent",
|
|
ready: "bg-ok/15 text-ok",
|
|
failed: "bg-err/15 text-err",
|
|
archived: "bg-fg-dim/15 text-fg-muted",
|
|
};
|
|
|
|
const STATUS_LABEL_KEY: Record<WorldStatus, string> = {
|
|
draft: "worlds.status_draft",
|
|
building: "worlds.status_building",
|
|
ready: "worlds.status_ready",
|
|
failed: "worlds.status_failed",
|
|
archived: "worlds.status_archived",
|
|
};
|
|
|
|
export function WorldCard({ world, onDelete, className }: WorldCardProps) {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
|
|
const isReady = world.status === "ready";
|
|
|
|
return (
|
|
<article
|
|
className={cn(
|
|
"card flex flex-col gap-2 hover:border-accent/40 transition-colors",
|
|
className,
|
|
)}
|
|
>
|
|
<header className="flex items-start justify-between gap-2">
|
|
<div className="min-w-0">
|
|
<h3 className="text-base font-semibold text-fg truncate">{world.name}</h3>
|
|
<p className="text-xs text-fg-muted uppercase tracking-wide">{world.language}</p>
|
|
</div>
|
|
<span className={cn("badge shrink-0", STATUS_BADGE[world.status])}>
|
|
{t(STATUS_LABEL_KEY[world.status])}
|
|
</span>
|
|
</header>
|
|
|
|
<p className="text-sm text-fg-muted line-clamp-2 min-h-[2.5rem]">
|
|
{world.description || "—"}
|
|
</p>
|
|
|
|
<dl className="grid grid-cols-2 gap-2 text-xs">
|
|
<div>
|
|
<dt className="text-fg-dim">{t("worlds.player")}</dt>
|
|
<dd className="text-fg truncate">{world.preview_player_name || "—"}</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-fg-dim">{t("worlds.current_time")}</dt>
|
|
<dd className="text-fg truncate">{world.current_time || "—"}</dd>
|
|
</div>
|
|
<div className="col-span-2">
|
|
<dt className="text-fg-dim">{t("worlds.last_played")}</dt>
|
|
<dd className="text-fg">{world.last_played_at ? formatDate(world.last_played_at) : t("worlds.never_played")}</dd>
|
|
</div>
|
|
</dl>
|
|
|
|
<footer className="mt-2 flex gap-2">
|
|
<Button
|
|
size="sm"
|
|
variant={isReady ? "primary" : "secondary"}
|
|
onClick={() => navigate(`/worlds/${world.id}/play`)}
|
|
disabled={!isReady}
|
|
fullWidth
|
|
>
|
|
{t("worlds.play")}
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="secondary"
|
|
onClick={() => navigate(`/worlds/${world.id}/edit`)}
|
|
>
|
|
{t("worlds.edit")}
|
|
</Button>
|
|
{onDelete && (
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
onClick={() => onDelete(world)}
|
|
aria-label={t("common.delete")}
|
|
>
|
|
🗑
|
|
</Button>
|
|
)}
|
|
</footer>
|
|
</article>
|
|
);
|
|
}
|
|
|
|
function formatDate(iso: string): string {
|
|
try {
|
|
const d = new Date(iso);
|
|
return d.toLocaleString();
|
|
} catch {
|
|
return iso;
|
|
}
|
|
}
|