feat(source2): lock dark mode, sans-serif typography, and all recent updates

2026-08-20 23:02:00 +07:00
1 parent dd4c8f6876
commit 9f24b56e97
@@ -0,0 +1,67 @@
+"use client";
+
+import { Modal } from "@/components/ui/Modal";
+import { ShieldAlert, Clock, Loader2 } from "lucide-react";
+
+interface SessionTimeoutModalProps {
+  showWarning: boolean;
+  timeLeft: number;
+  isRenewing: boolean;
+  onRenew: () => void;
+  onLogout: () => void;
+}
+
+export function SessionTimeoutModal({
+  showWarning,
+  timeLeft,
+  isRenewing,
+  onRenew,
+  onLogout
+}: SessionTimeoutModalProps) {
+  const formatCountdown = (seconds: number) => {
+    const m = Math.floor(seconds / 60);
+    const s = seconds % 60;
+    return `${m}m ${s.toString().padStart(2, '0')}s`;
+  };
+
+  return (
+    <Modal isOpen={showWarning} onClose={() => {}} title="Session Security Alert">
+      <div className="space-y-5 text-xs text-slate-300">
+        <div className="flex items-center gap-3 p-3 bg-amber-500/10 border border-amber-500/20 rounded-xl">
+          <ShieldAlert className="w-5 h-5 text-amber-400 shrink-0" />
+          <p className="font-medium text-slate-200">
+            For your security, your active dashboard session will automatically expire due to inactivity.
+          </p>
+        </div>
+
+        <div className="flex flex-col items-center justify-center p-6 bg-slate-900/40 border border-white/5 rounded-2xl relative overflow-hidden">
+          <div className="absolute inset-0 bg-blue-500/5 blur-3xl rounded-full" />
+          <Clock className="w-8 h-8 text-blue-400 mb-2 relative animate-pulse" />
+          <span className="text-[10px] text-slate-500 uppercase tracking-widest relative">Remaining Time</span>
+          <span className="text-3xl font-black text-white font-mono tracking-tight mt-1 relative">
+            {formatCountdown(timeLeft)}
+          </span>
+        </div>
+
+        <div className="pt-2 flex justify-end gap-3">
+          <button
+            type="button"
+            onClick={onLogout}
+            className="px-4 py-2 text-sm font-semibold text-red-400 hover:text-red-300 hover:bg-red-500/10 rounded-xl transition-all"
+          >
+            Logout Now
+          </button>
+          <button
+            type="button"
+            onClick={onRenew}
+            disabled={isRenewing}
+            className="flex items-center gap-2 bg-primary hover:bg-primary/90 active:scale-[0.98] text-primary-foreground px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-blue-500/20 transition-all disabled:opacity-50"
+          >
+            {isRenewing ? <Loader2 className="w-4 h-4 animate-spin" /> : null}
+            Keep Me Logged In
+          </button>
+        </div>
+      </div>
+    </Modal>
+  );
+}