admin
81 lines
3.0 KiB
TypeScript
81 lines
3.0 KiB
TypeScript
"use client";
|
|
import { useTransition } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { RotateCcw, Trash2 } from "lucide-react";
|
|
import { restoreImages, purgeFromTrash } from "@/app/actions/trash";
|
|
import { relativeTime } from "@/lib/utils";
|
|
import { thumbUrl } from "@/lib/assetUrls";
|
|
|
|
export interface TrashCardImage {
|
|
id: number;
|
|
thumbPath: string;
|
|
width: number;
|
|
height: number;
|
|
code: string | null;
|
|
title: string | null;
|
|
rating: number | null;
|
|
watched: boolean;
|
|
studioName: string | null;
|
|
deletedAt: number;
|
|
}
|
|
|
|
export function TrashCard({ image }: { image: TrashCardImage }) {
|
|
const [pending, start] = useTransition();
|
|
const router = useRouter();
|
|
|
|
const onRestore = () => {
|
|
start(async () => {
|
|
await restoreImages([image.id]);
|
|
router.refresh();
|
|
});
|
|
};
|
|
const onPurge = () => {
|
|
if (!confirm("Permanently delete this cover? Cannot be undone.")) return;
|
|
start(async () => {
|
|
await purgeFromTrash([image.id]);
|
|
router.refresh();
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="group relative block rounded-2xl overflow-hidden glass" style={{ breakInside: "avoid" }}>
|
|
<div className="relative">
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src={thumbUrl({ thumbPath: image.thumbPath, code: image.code, id: image.id })}
|
|
alt={image.title ?? image.code ?? ""}
|
|
loading="lazy"
|
|
width={image.width}
|
|
height={image.height}
|
|
className="w-full h-auto block opacity-70"
|
|
/>
|
|
{image.code && (
|
|
<span className="absolute top-3 left-3 text-[10px] uppercase tracking-wider font-mono px-2 py-0.5 rounded-full glass-strong text-[var(--color-cyan)]">
|
|
{image.code}
|
|
</span>
|
|
)}
|
|
<span className="absolute top-3 right-3 text-[10px] uppercase tracking-wider font-mono px-2 py-0.5 rounded-full backdrop-blur-md border border-[var(--color-coral)]/30 text-[var(--color-coral)] bg-[var(--color-coral)]/10">
|
|
deleted {relativeTime(image.deletedAt)}
|
|
</span>
|
|
|
|
<div className="absolute inset-x-0 bottom-0 p-3 bg-gradient-to-t from-black/85 via-black/55 to-transparent flex items-center gap-2">
|
|
<button
|
|
onClick={onRestore}
|
|
disabled={pending}
|
|
className="flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-lg bg-[var(--color-cyan)]/20 text-[var(--color-cyan)] border border-[var(--color-cyan)]/40 hover:bg-[var(--color-cyan)]/30 disabled:opacity-50"
|
|
>
|
|
<RotateCcw className="w-3.5 h-3.5" /> Restore
|
|
</button>
|
|
<button
|
|
onClick={onPurge}
|
|
disabled={pending}
|
|
className="flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-lg bg-[var(--color-coral)]/15 text-[var(--color-coral)] border border-[var(--color-coral)]/40 hover:bg-[var(--color-coral)]/25 disabled:opacity-50"
|
|
>
|
|
<Trash2 className="w-3.5 h-3.5" /> Delete forever
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|