refactor(react/dialogs): separate alert component

apps/client/src/widgets/dialogs/delete_notes.tsx

@@ -11,6 +11,7 @@ import froca from "../../services/froca.js";
 import FNote from "../../entities/fnote.js";
 import link from "../../services/link.js";
 import Button from "../react/Button.jsx";
+import Alert from "../react/Alert.jsx";
 
 export interface ResolveOptions {
     proceed: boolean;
@@ -136,10 +137,7 @@ function BrokenRelations({ brokenRelations }: { brokenRelations: DeleteNotesPrev
 
     if (brokenRelations.length) {
         return (
-            <div className="broken-relations-wrapper">
-                <div className="alert alert-danger">
-                    <h4>{t("delete_notes.broken_relations_to_be_deleted", { relationCount: brokenRelations.length })}</h4>
-
+            <Alert type="danger" title={t("delete_notes.broken_relations_to_be_deleted", { relationCount: brokenRelations.length })}>
                 <ul className="broken-relations-list" style={{ maxHeight: "200px", overflow: "auto" }}>
                     {brokenRelations.map((_, index) => {
                         return (
@@ -149,14 +147,13 @@ function BrokenRelations({ brokenRelations }: { brokenRelations: DeleteNotesPrev
                         );
                     })}
                 </ul>
-                </div>
-            </div>
+            </Alert>
         );
     } else {
         return (
-            <div className="no-note-to-delete-wrapper alert alert-info">
+            <Alert type="info">
                 {t("delete_notes.no_note_to_delete")}
-            </div>
+            </Alert>
         );
     }
 }

apps/client/src/widgets/react/Alert.tsx

@@ -0,0 +1,17 @@
+import { ComponentChildren } from "preact";
+
+interface AlertProps {
+    type: "info" | "danger";
+    title?: string;
+    children: ComponentChildren;
+}
+
+export default function Alert({ title, type, children }: AlertProps) {
+    return (
+        <div className={`alert alert-${type}`}>
+            {title && <h4>{title}</h4>}
+
+            {children}
+        </div>
+    );
+}