Dateien nach "frontend/src" hochladen

2026-05-26 01:12:07 +02:00
parent 360deb7257
commit 9bf8415a43
2 changed files with 112 additions and 0 deletions
--- a/frontend/src/confirm.jsx
+++ b/frontend/src/confirm.jsx
@@ -0,0 +1,49 @@
+// ── Globaler Bestätigungs-Dialog ─────────────────────────────────────────────
+// Verwendung: const { confirm, ConfirmDialog } = useConfirm();
+//             await confirm('Wirklich löschen?') && deleteFn();
+import { useState, useCallback } from 'react';
+
+export function useConfirm() {
+  const [state, setState] = useState({ open:false, msg:'', resolve:null });
+
+  const confirm = useCallback((msg='Wirklich fortfahren?') => {
+    return new Promise(resolve => {
+      setState({ open:true, msg, resolve });
+    });
+  }, []);
+
+  const handle = yes => {
+    state.resolve?.(yes);
+    setState({ open:false, msg:'', resolve:null });
+  };
+
+  const ConfirmDialog = () => !state.open ? null : (
+    <div style={{ position:'fixed', inset:0, background:'rgba(0,0,0,0.75)',
+      zIndex:9000, display:'flex', alignItems:'flex-end', justifyContent:'center' }}
+      onClick={() => handle(false)}>
+      <div style={{ background:'#1a1a1e', borderRadius:'16px 16px 0 0', width:'100%',
+        maxWidth:500, padding:'20px 20px 32px',
+        border:'1px solid rgba(255,255,255,0.1)' }}
+        onClick={e => e.stopPropagation()}>
+        <div style={{ width:36, height:4, background:'rgba(255,255,255,0.15)',
+          borderRadius:2, margin:'0 auto 18px' }}/>
+        <p style={{ color:'#fff', fontFamily:'monospace', fontSize:14,
+          textAlign:'center', marginBottom:20, lineHeight:1.6 }}>{state.msg}</p>
+        <div style={{ display:'flex', gap:10 }}>
+          <button onClick={() => handle(false)} style={{
+            flex:1, padding:'12px 0', background:'rgba(255,255,255,0.06)',
+            border:'1px solid rgba(255,255,255,0.1)', borderRadius:10,
+            color:'rgba(255,255,255,0.7)', fontFamily:'monospace', fontSize:13, cursor:'pointer',
+          }}>Abbrechen</button>
+          <button onClick={() => handle(true)} style={{
+            flex:1, padding:'12px 0', background:'rgba(255,107,157,0.15)',
+            border:'1px solid rgba(255,107,157,0.4)', borderRadius:10,
+            color:'#ff6b9d', fontFamily:'monospace', fontSize:13, cursor:'pointer', fontWeight:700,
+          }}>Ja, löschen</button>
+        </div>
+      </div>
+    </div>
+  );
+
+  return { confirm, ConfirmDialog };
+}