root
44406b72db
Moteva-style AI design workbench replica. Home prompt creates a project; the project page provides an infinite canvas with node drag, zoom/pan, a design chat panel, history replay, image asset upload, and project save/regenerate. - Backend: go-zero, DDD layering, sqlc/pgx, optional PostgreSQL; memory or Redis cache; asynq job queue; MinIO/S3/R2/OSS object storage; sky-valley/pi agent runtime adapter. - Frontend: Next.js App Router + Vite artifact build, TypeScript, i18n, shadcn/ui components, auth (OTP/Turnstile/Google/WeChat). - Deploy: Docker Compose and k3s manifests. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
46 lines
1.6 KiB
TypeScript
46 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { Check, X } from "lucide-react";
|
|
import type { ProjectSummary } from "@/domain/design";
|
|
import { useI18n } from "@/i18n/i18n";
|
|
import { ProjectThumb } from "@/ui/components/ProjectThumb";
|
|
|
|
type ProjectCardProps = {
|
|
project: ProjectSummary;
|
|
editMode?: boolean;
|
|
selected?: boolean;
|
|
onActivate: () => void;
|
|
onDelete?: () => void;
|
|
};
|
|
|
|
export function ProjectCard({ project, editMode = false, selected = false, onActivate, onDelete }: ProjectCardProps) {
|
|
const { t, locale } = useI18n();
|
|
|
|
return (
|
|
<div className={`project-card-shell ${editMode ? "is-selecting" : ""} ${selected ? "selected" : ""}`}>
|
|
{editMode && (
|
|
<span className="project-card-selection" aria-hidden="true">
|
|
{selected && <Check size={14} />}
|
|
</span>
|
|
)}
|
|
<button className="project-card" onClick={onActivate} aria-pressed={editMode ? selected : undefined}>
|
|
<ProjectThumb variant={project.thumbnail} />
|
|
{!editMode && <span className="project-card-overlay">{t("continueEditing")}</span>}
|
|
<strong>{project.title}</strong>
|
|
<small>{formatProjectDate(project.updatedAt, locale)}</small>
|
|
</button>
|
|
{!editMode && onDelete && (
|
|
<button className="project-delete-button" aria-label={t("contextDelete")} onClick={onDelete}>
|
|
<X size={14} />
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function formatProjectDate(value: string, locale: string) {
|
|
const date = new Date(value);
|
|
if (Number.isNaN(date.getTime())) return value;
|
|
return new Intl.DateTimeFormat(locale, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" }).format(date);
|
|
}
|