updated gallery

2026-03-17 18:34:26 +01:00
parent 7b37259a2c
commit 7da0fd39f7
52 changed files with 1216 additions and 870 deletions
--- a/resources/js/components/ui/NovaConfirmDialog.jsx
+++ b/resources/js/components/ui/NovaConfirmDialog.jsx
@@ -0,0 +1,94 @@
+import React, { useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
+
+export default function NovaConfirmDialog({
+  open,
+  title = 'Please confirm',
+  message,
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  confirmTone = 'danger',
+  onConfirm,
+  onClose,
+  busy = false,
+}) {
+  const backdropRef = useRef(null)
+  const cancelButtonRef = useRef(null)
+
+  useEffect(() => {
+    if (!open) return undefined
+    const timeoutId = window.setTimeout(() => cancelButtonRef.current?.focus(), 60)
+    return () => window.clearTimeout(timeoutId)
+  }, [open])
+
+  useEffect(() => {
+    if (!open) return undefined
+
+    const handleKeyDown = (event) => {
+      if (event.key === 'Escape' && !busy) {
+        onClose?.()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [busy, onClose, open])
+
+  if (!open) return null
+
+  const confirmClassName = confirmTone === 'danger'
+    ? 'border border-rose-400/25 bg-rose-500/12 text-rose-100 hover:bg-rose-500/18 focus-visible:ring-rose-300/50'
+    : 'border border-accent/25 bg-accent/90 text-deep hover:brightness-110 focus-visible:ring-accent/50'
+
+  return createPortal(
+    <div
+      ref={backdropRef}
+      className="fixed inset-0 z-[9999] flex items-center justify-center bg-[#04070dcc] px-4 backdrop-blur-md"
+      onClick={(event) => {
+        if (event.target === backdropRef.current && !busy) {
+          onClose?.()
+        }
+      }}
+      role="presentation"
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="nova-confirm-title"
+        className="w-full max-w-md overflow-hidden rounded-3xl border border-white/10 bg-[linear-gradient(180deg,rgba(16,22,34,0.98),rgba(8,12,19,0.98))] shadow-[0_30px_80px_rgba(0,0,0,0.55)]"
+      >
+        <div className="border-b border-white/[0.06] bg-white/[0.02] px-6 py-5">
+          <p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-white/35">Skinbase Nova</p>
+          <h3 id="nova-confirm-title" className="mt-2 text-lg font-semibold text-white">
+            {title}
+          </h3>
+        </div>
+
+        <div className="px-6 py-5">
+          <p className="text-sm leading-6 text-white/70">{message}</p>
+        </div>
+
+        <div className="flex items-center justify-end gap-3 border-t border-white/[0.06] px-6 py-4">
+          <button
+            ref={cancelButtonRef}
+            type="button"
+            onClick={() => onClose?.()}
+            disabled={busy}
+            className="inline-flex items-center justify-center rounded-full border border-white/[0.08] bg-white/[0.04] px-4 py-2 text-sm font-medium text-white/70 transition hover:bg-white/[0.08] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20 disabled:cursor-not-allowed disabled:opacity-60"
+          >
+            {cancelLabel}
+          </button>
+          <button
+            type="button"
+            onClick={() => onConfirm?.()}
+            disabled={busy}
+            className={`inline-flex items-center justify-center rounded-full px-4 py-2 text-sm font-semibold transition focus-visible:outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-60 ${confirmClassName}`}
+          >
+            {busy ? 'Working…' : confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  )
+}