File size: 2,661 Bytes
abcf568 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | import { useModalTransition } from '../../../hooks/useModalTransition'
import { useI18n } from '../../../i18n'
interface PlotStudioExitConfirmModalProps {
isOpen: boolean
onClose: () => void
onConfirm: () => void
}
export function PlotStudioExitConfirmModal({
isOpen,
onClose,
onConfirm,
}: PlotStudioExitConfirmModalProps) {
const { t } = useI18n()
const { shouldRender, isExiting } = useModalTransition(isOpen)
if (!shouldRender) {
return null
}
return (
<div className="fixed inset-0 z-[140] flex items-center justify-center p-4">
<div
className={`absolute inset-0 bg-bg-primary/60 backdrop-blur-md transition-opacity duration-300 ${
isExiting ? 'opacity-0' : 'animate-overlay-wash-in'
}`}
onClick={onClose}
/>
<div
className={`relative w-full max-w-sm rounded-[2.2rem] border border-border/5 bg-bg-secondary p-8 shadow-2xl ${
isExiting ? 'animate-fade-out-soft' : 'animate-fade-in-soft'
}`}
>
<div className="flex items-start justify-between gap-4">
<div>
<h2 className="text-lg font-medium tracking-tight text-text-primary">
{t('studio.exitConfirmTitle')}
</h2>
<p className="mt-3 text-sm leading-7 text-text-secondary/72">
{t('studio.exitConfirmDescription')}
</p>
</div>
<button
type="button"
onClick={onClose}
className="rounded-2xl p-2.5 text-text-secondary/50 transition-all hover:bg-bg-primary/50 hover:text-text-primary"
aria-label={t('common.close')}
title={t('common.close')}
>
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div className="mt-8 grid grid-cols-2 gap-4">
<button
type="button"
onClick={onClose}
className="rounded-2xl bg-bg-primary/50 px-5 py-3.5 text-sm font-medium text-text-secondary transition-all hover:bg-bg-tertiary hover:text-text-primary"
>
{t('common.cancel')}
</button>
<button
type="button"
onClick={onConfirm}
className="rounded-2xl bg-accent px-5 py-3.5 text-sm font-medium text-bg-primary shadow-md shadow-accent/10 transition-all hover:bg-accent/90"
>
{t('studio.exitConfirmAction')}
</button>
</div>
</div>
</div>
)
}
|