Streamline project management UI

2026-07-28 18:30:44 +02:00
parent d77cfbeb49
commit 5fa2a701dc
5 changed files with 666 additions and 378 deletions
@@ -0,0 +1,75 @@
+"use client";
+
+import React, { type FormEvent, type ReactNode } from "react";
+
+interface FormModalProps {
+  children: ReactNode;
+  description?: string;
+  isSaving: boolean;
+  onClose: () => void;
+  onSubmit: (event: FormEvent<HTMLFormElement>) => void;
+  submitDisabled?: boolean;
+  submitLabel: string;
+  title: string;
+}
+
+export function FormModal({
+  children,
+  description,
+  isSaving,
+  onClose,
+  onSubmit,
+  submitDisabled,
+  submitLabel,
+  title,
+}: FormModalProps) {
+  return (
+    <>
+      <div
+        aria-modal="true"
+        className="modal fade show d-block"
+        role="dialog"
+        tabIndex={-1}
+      >
+        <div className="modal-dialog modal-lg modal-dialog-centered">
+          <form className="modal-content" onSubmit={onSubmit}>
+            <div className="modal-header">
+              <div>
+                <h2 className="modal-title fs-5">{title}</h2>
+                {description ? (
+                  <p className="text-secondary small mb-0">{description}</p>
+                ) : null}
+              </div>
+              <button
+                aria-label="Schließen"
+                className="btn-close"
+                disabled={isSaving}
+                onClick={onClose}
+                type="button"
+              />
+            </div>
+            <div className="modal-body">{children}</div>
+            <div className="modal-footer">
+              <button
+                className="btn btn-outline-secondary"
+                disabled={isSaving}
+                onClick={onClose}
+                type="button"
+              >
+                Abbrechen
+              </button>
+              <button
+                className="btn btn-primary"
+                disabled={isSaving || submitDisabled}
+                type="submit"
+              >
+                {isSaving ? "Wird gespeichert …" : submitLabel}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+      <div className="modal-backdrop fade show" />
+    </>
+  );
+}