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);
|
||
|
|
}
|