refactor(react/dialogs): separate alert component

This commit is contained in:
Elian Doran
2025-08-05 18:09:29 +03:00
parent 87d9ea06f3
commit 02b0d1fb5e
2 changed files with 32 additions and 18 deletions

View File

@@ -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,27 +137,23 @@ 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>
<ul className="broken-relations-list" style={{ maxHeight: "200px", overflow: "auto" }}>
{brokenRelations.map((_, index) => {
return (
<li key={index}>
<span dangerouslySetInnerHTML={{ __html: t("delete_notes.deleted_relation_text", notesWithBrokenRelations[index]) }} />
</li>
);
})}
</ul>
</div>
</div>
<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 (
<li key={index}>
<span dangerouslySetInnerHTML={{ __html: t("delete_notes.deleted_relation_text", notesWithBrokenRelations[index]) }} />
</li>
);
})}
</ul>
</Alert>
);
} else {
return (
<div className="no-note-to-delete-wrapper alert alert-info">
{t("delete_notes.no_note_to_delete")}
</div>
<Alert type="info">
{t("delete_notes.no_note_to_delete")}
</Alert>
);
}
}

View File

@@ -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>
);
}