Spaces:
Sleeping
Sleeping
| interface ConfirmModalProps { | |
| title: string; | |
| message: string; | |
| confirmText?: string; | |
| cancelText?: string; | |
| onConfirm: () => void; | |
| onCancel: () => void; | |
| } | |
| export function ConfirmModal({ | |
| title, | |
| message, | |
| confirmText = 'Delete', | |
| cancelText = 'Cancel', | |
| onConfirm, | |
| onCancel, | |
| }: ConfirmModalProps) { | |
| return ( | |
| <div | |
| style={{ | |
| position: 'fixed', | |
| inset: 0, | |
| backgroundColor: 'rgba(0, 0, 0, 0.75)', | |
| backdropFilter: 'blur(4px)', | |
| display: 'flex', | |
| alignItems: 'center', | |
| justifyContent: 'center', | |
| zIndex: 1000, | |
| padding: '20px', | |
| }} | |
| onClick={onCancel} | |
| > | |
| <div | |
| style={{ | |
| width: '100%', | |
| maxWidth: '380px', | |
| backgroundColor: 'var(--bg-card)', | |
| border: '1px solid var(--border-color)', | |
| borderRadius: '12px', | |
| padding: '28px 24px', | |
| boxShadow: '0 12px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(230, 0, 18, 0.15)', | |
| animation: 'fadeIn 0.2s ease-out', | |
| }} | |
| onClick={(e) => e.stopPropagation()} | |
| > | |
| <h3 | |
| style={{ | |
| fontSize: '1.2rem', | |
| fontWeight: 700, | |
| color: 'var(--text-primary)', | |
| margin: '0 0 10px 0', | |
| }} | |
| > | |
| {title} | |
| </h3> | |
| <p | |
| style={{ | |
| fontSize: '0.9rem', | |
| color: 'var(--text-secondary)', | |
| margin: '0 0 24px 0', | |
| lineHeight: 1.5, | |
| }} | |
| > | |
| {message} | |
| </p> | |
| <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '12px' }}> | |
| <button | |
| onClick={onCancel} | |
| style={{ | |
| padding: '9px 16px', | |
| borderRadius: '6px', | |
| border: '1px solid var(--border-color)', | |
| backgroundColor: 'transparent', | |
| color: 'var(--text-primary)', | |
| fontSize: '0.85rem', | |
| fontWeight: 600, | |
| cursor: 'pointer', | |
| transition: 'background-color 0.2s', | |
| }} | |
| onMouseEnter={(e) => { | |
| e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.05)'; | |
| }} | |
| onMouseLeave={(e) => { | |
| e.currentTarget.style.backgroundColor = 'transparent'; | |
| }} | |
| > | |
| {cancelText} | |
| </button> | |
| <button | |
| onClick={onConfirm} | |
| style={{ | |
| padding: '9px 18px', | |
| borderRadius: '6px', | |
| border: 'none', | |
| backgroundColor: 'var(--red-accent)', | |
| color: '#fff', | |
| fontSize: '0.85rem', | |
| fontWeight: 600, | |
| cursor: 'pointer', | |
| boxShadow: '0 0 12px var(--red-glow)', | |
| transition: 'background-color 0.2s', | |
| }} | |
| onMouseEnter={(e) => { | |
| e.currentTarget.style.backgroundColor = 'var(--red-hover)'; | |
| }} | |
| onMouseLeave={(e) => { | |
| e.currentTarget.style.backgroundColor = 'var(--red-accent)'; | |
| }} | |
| > | |
| {confirmText} | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| } | |