forked from UKSOURCE/ipv6
73 lines
2.4 KiB
TypeScript
73 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef } from "react";
|
|
|
|
type Props = {
|
|
open: boolean;
|
|
title: string;
|
|
message: string;
|
|
acknowledgeLabel?: string;
|
|
onAcknowledge: () => void;
|
|
};
|
|
|
|
export default function SubmissionSuccessModal({
|
|
open,
|
|
title,
|
|
message,
|
|
acknowledgeLabel = "OK",
|
|
onAcknowledge,
|
|
}: Props) {
|
|
const onAckRef = useRef(onAcknowledge);
|
|
onAckRef.current = onAcknowledge;
|
|
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
const prevOverflow = document.body.style.overflow;
|
|
document.body.style.overflow = "hidden";
|
|
const onKeyDown = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape") onAckRef.current();
|
|
};
|
|
window.addEventListener("keydown", onKeyDown);
|
|
return () => {
|
|
document.body.style.overflow = prevOverflow;
|
|
window.removeEventListener("keydown", onKeyDown);
|
|
};
|
|
}, [open]);
|
|
|
|
if (!open) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[200] flex items-center justify-center p-4">
|
|
<button
|
|
type="button"
|
|
className="absolute inset-0 cursor-default bg-black/75 backdrop-blur-sm"
|
|
aria-label="Close"
|
|
onClick={() => onAckRef.current()}
|
|
/>
|
|
<div
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="submission-success-title"
|
|
className="relative z-10 w-full max-w-md rounded-xl border border-primary/35 bg-[rgba(15,15,15,0.95)] backdrop-blur-xl px-8 py-10 shadow-[0_0_48px_rgba(197,160,89,0.18)] text-center border-t border-t-primary/20"
|
|
>
|
|
<div className="flex justify-center mb-5">
|
|
<span className="material-symbols-outlined text-primary text-[56px]" style={{ fontVariationSettings: "'FILL' 1" }}>
|
|
check_circle
|
|
</span>
|
|
</div>
|
|
<h2 id="submission-success-title" className="font-[var(--font-display-lg)] text-xl sm:text-2xl text-primary tracking-tight mb-3">
|
|
{title}
|
|
</h2>
|
|
<p className="text-on-surface-variant text-sm sm:text-[15px] leading-relaxed mb-8">{message}</p>
|
|
<button
|
|
type="button"
|
|
className="w-full sm:w-auto min-w-[200px] gold-gradient-bg px-10 py-3.5 rounded-lg text-on-primary font-[var(--font-display-lg)] text-sm font-bold uppercase tracking-wider shadow-[0_10px_30px_rgba(197,160,89,0.2)] hover:shadow-[0_14px_36px_rgba(197,160,89,0.3)] transition-all active:scale-[0.98]"
|
|
onClick={() => onAckRef.current()}
|
|
>
|
|
{acknowledgeLabel}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|