Files
stripstream-librarian/apps/backoffice/app/components/DeleteSeriesButton.tsx
Froidefond Julien 5757517d84
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 45s
fix: harmoniser la hauteur des boutons dans la toolbar série
- ProwlarrSearchModal: py-2 → py-1.5, gap-2 → gap-1.5 (aligné avec les autres)
- DeleteSeriesButton: remplace Button size=sm (h-9) par bouton inline
  avec py-1.5 cohérent avec le reste de la toolbar

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 17:58:13 +02:00

63 lines
2.1 KiB
TypeScript

"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { Button, Icon, Modal } from "./ui";
import { useTranslation } from "@/lib/i18n/context";
export function DeleteSeriesButton({ libraryId, seriesName }: { libraryId: string; seriesName: string }) {
const { t } = useTranslation();
const router = useRouter();
const [showConfirm, setShowConfirm] = useState(false);
const [deleting, setDeleting] = useState(false);
async function handleDelete() {
setDeleting(true);
setShowConfirm(false);
try {
const resp = await fetch(
`/api/libraries/${libraryId}/series/${encodeURIComponent(seriesName)}`,
{ method: "DELETE" }
);
if (resp.ok) {
router.push(`/libraries/${libraryId}/series`);
}
} finally {
setDeleting(false);
}
}
return (
<>
<button
type="button"
onClick={() => setShowConfirm(true)}
disabled={deleting}
className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-destructive/30 bg-destructive/10 text-destructive text-sm font-medium hover:bg-destructive/20 transition-colors disabled:opacity-50"
>
{deleting ? <Icon name="spinner" size="sm" className="animate-spin" /> : <Icon name="trash" size="sm" />}
{t("seriesDetail.delete")}
</button>
<Modal isOpen={showConfirm} onClose={() => setShowConfirm(false)} maxWidth="sm">
<div className="p-6">
<h3 className="text-lg font-semibold text-foreground mb-2">
{t("seriesDetail.delete")}
</h3>
<p className="text-sm text-muted-foreground">
{t("seriesDetail.confirmDelete")}
</p>
</div>
<div className="flex justify-end gap-2 px-6 pb-6">
<Button variant="outline" size="sm" onClick={() => setShowConfirm(false)}>
{t("common.cancel")}
</Button>
<Button variant="destructive" size="sm" onClick={handleDelete}>
{t("seriesDetail.delete")}
</Button>
</div>
</Modal>
</>
);
}