209df5d9f2
- Refactored all components in src/components to: - Use arrow function components and prop destructuring - Add JSDoc for all exported components - Improve accessibility (aria-labels, roles, etc.) - Use correct key usage in lists - Add comments for non-obvious logic - Use modern event handler patterns and memoization where appropriate - Refactored src/pages/index.astro: - Removed <html>, <head>, and <body> (should be in layout) - Used semantic <main> for main content - Kept only necessary imports and markup - Refactored src/styles/index.css: - Removed duplicate rules - Ensured only global resets/utilities are present - Added comments for clarity - Ensured no component-specific styles are present - Used consistent formatting Brings the codebase in line with modern Astro and Preact best practices, improves maintainability, accessibility, and code clarity.
35 lines
1.4 KiB
JavaScript
35 lines
1.4 KiB
JavaScript
import { h } from 'preact';
|
||
import styles from './Modal.module.css';
|
||
|
||
/**
|
||
* Generic modal dialog for confirmation.
|
||
* @param {object} props
|
||
* @param {boolean} props.open
|
||
* @param {string} props.title
|
||
* @param {string} props.message
|
||
* @param {Function} props.onCancel
|
||
* @param {Function} props.onConfirm
|
||
* @returns {import('preact').VNode|null}
|
||
*/
|
||
const Modal = ({ open, title, message, onCancel, onConfirm }) => {
|
||
if (!open) return null;
|
||
return (
|
||
<div className={styles['modal'] + ' ' + styles['show']} role="dialog" aria-modal="true" aria-labelledby="modal-title">
|
||
<div className={styles['modal-content']}>
|
||
<div className={styles['modal-header']}>
|
||
<span className={styles['modal-title']} id="modal-title">{title}</span>
|
||
<button className={styles['close-button']} onClick={onCancel} aria-label="Schließen">×</button>
|
||
</div>
|
||
<div className={styles['modal-body']}>
|
||
<div className={styles['modal-message']}>{message}</div>
|
||
</div>
|
||
<div className={styles['modal-footer']}>
|
||
<button className={styles['modal-button'] + ' ' + styles['cancel']} onClick={onCancel} aria-label="Abbrechen">Abbrechen</button>
|
||
<button className={styles['modal-button'] + ' ' + styles['confirm']} onClick={onConfirm} aria-label="Löschen">Löschen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Modal;
|