87 lines
2.5 KiB
TypeScript
87 lines
2.5 KiB
TypeScript
import { useState } from 'react';
|
|
import { deletePost } from '../../lib/api';
|
|
|
|
interface Props {
|
|
slug: string;
|
|
title: string;
|
|
variant?: 'icon' | 'full';
|
|
}
|
|
|
|
export default function DeletePostButton({ slug, title, variant = 'full' }: Props) {
|
|
const [busy, setBusy] = useState(false);
|
|
|
|
async function handleClick() {
|
|
if (busy) return;
|
|
if (!window.confirm(`Delete "${title}"? This cannot be undone.`)) return;
|
|
setBusy(true);
|
|
try {
|
|
await deletePost(slug);
|
|
window.location.href = '/';
|
|
} catch (e) {
|
|
window.alert(`Failed to delete: ${e instanceof Error ? e.message : 'unknown error'}`);
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
if (variant === 'icon') {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={handleClick}
|
|
disabled={busy}
|
|
title="Delete post"
|
|
aria-label="Delete post"
|
|
className="p-2 rounded-md bg-surface0/80 hover:bg-red/20 text-subtext0 hover:text-red border border-surface1 transition-colors disabled:opacity-50"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="14"
|
|
height="14"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
aria-hidden="true"
|
|
>
|
|
<path d="M3 6h18" />
|
|
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
|
|
<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
|
|
<line x1="10" x2="10" y1="11" y2="17" />
|
|
<line x1="14" x2="14" y1="11" y2="17" />
|
|
</svg>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={handleClick}
|
|
disabled={busy}
|
|
className="inline-flex items-center gap-2 bg-surface0 hover:bg-red/15 text-subtext1 hover:text-red px-3 py-1.5 md:px-4 md:py-2 rounded-md border border-surface1 hover:border-red/30 transition-colors text-sm disabled:opacity-50"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="14"
|
|
height="14"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
aria-hidden="true"
|
|
>
|
|
<path d="M3 6h18" />
|
|
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
|
|
<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
|
|
<line x1="10" x2="10" y1="11" y2="17" />
|
|
<line x1="14" x2="14" y1="11" y2="17" />
|
|
</svg>
|
|
{busy ? 'Deleting…' : 'Delete'}
|
|
</button>
|
|
);
|
|
}
|