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