keyhan
e99ab789ba
Localize the confirm modal, delete button, deleting overlays/modal, the build-progress modal, deployment progress bar/manager and the resource upgrade modal via a shared components dictionary. Build-phase labels now resolve from the dictionary; deleting overlays take name/kind and build their own localized message (callers updated). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import { Clock } from 'lucide-react';
|
|
import { useT } from '@/i18n/I18nProvider';
|
|
|
|
export function DeletingModal({
|
|
open,
|
|
resourceName,
|
|
resourceKind = 'application',
|
|
}: {
|
|
open: boolean;
|
|
resourceName: string;
|
|
resourceKind?: 'application' | 'service';
|
|
}) {
|
|
const t = useT();
|
|
if (!open) return null;
|
|
|
|
const detail =
|
|
resourceKind === 'service'
|
|
? t.components.deletingModalDetailService
|
|
: t.components.deletingModalDetailApp;
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 z-[100] flex items-center justify-center bg-black/45 p-4"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="deleting-modal-title"
|
|
aria-busy="true"
|
|
>
|
|
<div className="bg-white rounded-2xl shadow-xl max-w-md w-full p-8 text-center space-y-3">
|
|
<div className="mx-auto w-14 h-14 rounded-full bg-red-50 flex items-center justify-center">
|
|
<Clock className="w-7 h-7 text-red-600 animate-spin" />
|
|
</div>
|
|
<h2 id="deleting-modal-title" className="text-lg font-semibold text-gray-900">
|
|
{t.components.deleting}
|
|
</h2>
|
|
<p className="text-sm text-gray-600">
|
|
{t.components.deletingModalBeingRemoved
|
|
.split('{name}')
|
|
.flatMap((part, i) =>
|
|
i === 0
|
|
? [part]
|
|
: [<span key={i} className="font-semibold text-gray-900">{resourceName}</span>, part],
|
|
)}
|
|
</p>
|
|
<p className="text-xs text-gray-500">{detail}</p>
|
|
<p className="text-xs text-amber-700 font-medium pt-1">{t.components.deletingModalWait}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|