127 lines
No EOL
4.3 KiB
TypeScript
127 lines
No EOL
4.3 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { FaTimes } from 'react-icons/fa';
|
|
import styles from './DashboardPromptSetModal.module.css';
|
|
|
|
interface DashboardPromptSetModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onSubmit: (promptData: { name: string; content: string }) => Promise<void>;
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
function DashboardPromptSetModal({ isOpen, onClose, onSubmit, isLoading = false }: DashboardPromptSetModalProps) {
|
|
const [name, setName] = useState('');
|
|
const [content, setContent] = useState('');
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
if (!name.trim()) {
|
|
setError('Name ist erforderlich');
|
|
return;
|
|
}
|
|
|
|
if (!content.trim()) {
|
|
setError('Inhalt ist erforderlich');
|
|
return;
|
|
}
|
|
|
|
setError(null);
|
|
|
|
try {
|
|
await onSubmit({ name: name.trim(), content: content.trim() });
|
|
// Reset form on success
|
|
setName('');
|
|
setContent('');
|
|
onClose();
|
|
} catch (err: any) {
|
|
setError(err.message || 'Fehler beim Erstellen des Prompts');
|
|
}
|
|
};
|
|
|
|
const handleClose = () => {
|
|
setName('');
|
|
setContent('');
|
|
setError(null);
|
|
onClose();
|
|
};
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className={styles.overlay}>
|
|
<div className={styles.modal}>
|
|
<div className={styles.header}>
|
|
<h2 className={styles.title}>Neuen Prompt erstellen</h2>
|
|
<button
|
|
onClick={handleClose}
|
|
className={styles.closeButton}
|
|
disabled={isLoading}
|
|
>
|
|
<FaTimes />
|
|
</button>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className={styles.form}>
|
|
<div className={styles.formGroup}>
|
|
<label htmlFor="promptName" className={styles.label}>
|
|
Name *
|
|
</label>
|
|
<input
|
|
id="promptName"
|
|
type="text"
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
className={styles.input}
|
|
placeholder="Geben Sie einen Namen für den Prompt ein"
|
|
disabled={isLoading}
|
|
maxLength={100}
|
|
/>
|
|
</div>
|
|
|
|
<div className={styles.formGroup}>
|
|
<label htmlFor="promptContent" className={styles.label}>
|
|
Inhalt *
|
|
</label>
|
|
<textarea
|
|
id="promptContent"
|
|
value={content}
|
|
onChange={(e) => setContent(e.target.value)}
|
|
className={styles.textarea}
|
|
placeholder="Geben Sie den Inhalt des Prompts ein"
|
|
disabled={isLoading}
|
|
rows={8}
|
|
/>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className={styles.error}>
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<div className={styles.buttons}>
|
|
<button
|
|
type="button"
|
|
onClick={handleClose}
|
|
className={styles.cancelButton}
|
|
disabled={isLoading}
|
|
>
|
|
Abbrechen
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className={styles.submitButton}
|
|
disabled={isLoading}
|
|
>
|
|
{isLoading ? 'Erstellen...' : 'Prompt erstellen'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default DashboardPromptSetModal;
|