Adding UI of FeedBack, Registration, Admin console

2026-05-12 20:54:15 +07:00
parent 6a48d6351c
commit dd95ff5a21
30 changed files with 10038 additions and 36 deletions
@@ -0,0 +1,72 @@
+"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>
+  );
+}