Wrap intl in span identifying translation

frontend/src/pages/Nginx/DeadHosts/TableWrapper.tsx

@@ -5,7 +5,7 @@ import Alert from "react-bootstrap/Alert";
 import { deleteDeadHost, toggleDeadHost } from "src/api/backend";
 import { Button, LoadingPage } from "src/components";
 import { useDeadHosts } from "src/hooks";
-import { intl } from "src/locale";
+import { intl, T } from "src/locale";
 import { DeadHostModal, DeleteConfirmModal } from "src/modals";
 import { showSuccess } from "src/notifications";
 import Table from "./Table";
@@ -54,7 +54,9 @@ export default function TableWrapper() {
 				<div className="card-header">
 					<div className="row w-full">
 						<div className="col">
-							<h2 className="mt-1 mb-0">{intl.formatMessage({ id: "dead-hosts.title" })}</h2>
+							<h2 className="mt-1 mb-0">
+								<T id="dead-hosts.title" />
+							</h2>
 						</div>
 						{data?.length ? (
 							<div className="col-md-auto col-sm-12">
@@ -71,9 +73,8 @@ export default function TableWrapper() {
 											onChange={(e: any) => setSearch(e.target.value.toLowerCase().trim())}
 										/>
 									</div>
-
 									<Button size="sm" className="btn-red" onClick={() => setEditId("new")}>
-										{intl.formatMessage({ id: "dead-hosts.add" })}
+										<T id="dead-hosts.add" />
 									</Button>
 								</div>
 							</div>
@@ -92,12 +93,12 @@ export default function TableWrapper() {
 				{editId ? <DeadHostModal id={editId} onClose={() => setEditId(0)} /> : null}
 				{deleteId ? (
 					<DeleteConfirmModal
-						title={intl.formatMessage({ id: "dead-host.delete.title" })}
+						title="dead-host.delete.title"
 						onConfirm={handleDelete}
 						onClose={() => setDeleteId(0)}
 						invalidations={[["dead-hosts"], ["dead-host", deleteId]]}
 					>
-						{intl.formatMessage({ id: "dead-host.delete.content" })}
+						<T id="dead-host.delete.content" />
 					</DeleteConfirmModal>
 				) : null}
 			</div>