| 1 | import { useState } from "react"; |
| 2 | import { useT } from "../lib/i18n"; |
| 3 | |
| 4 | export function RemoteReclaimBanner({ |
| 5 | tabId, |
| 6 | busyTabId, |
| 7 | onReclaim, |
| 8 | }: { |
| 9 | tabId: string; |
| 10 | busyTabId: string | null; |
| 11 | onReclaim: (tabId: string) => void; |
| 12 | }) { |
| 13 | const t = useT(); |
| 14 | const [armedTabId, setArmedTabId] = useState<string | null>(null); |
| 15 | const armed = armedTabId === tabId; |
| 16 | const busy = busyTabId !== null; |
| 17 | |
| 18 | return ( |
| 19 | <div className="banner banner--warning banner--actionable"> |
| 20 | <span className="banner__msg">{t("takeover.remoteBanner")}</span> |
| 21 | <span className="banner__spacer" /> |
| 22 | <button |
| 23 | type="button" |
| 24 | className={`btn btn--small${armed ? " btn--danger" : ""}`} |
| 25 | disabled={busy} |
| 26 | title={armed ? t("takeover.reclaimConfirm") : t("takeover.reclaimTitle")} |
| 27 | onClick={() => { |
| 28 | if (busy || !tabId) return; |
| 29 | if (!armed) { |
| 30 | setArmedTabId(tabId); |
| 31 | return; |
| 32 | } |
| 33 | setArmedTabId(null); |
| 34 | onReclaim(tabId); |
| 35 | }} |
| 36 | > |
| 37 | {busyTabId === tabId |
| 38 | ? t("takeover.reclaiming") |
| 39 | : armed |
| 40 | ? t("takeover.reclaimConfirmButton") |
| 41 | : t("takeover.reclaim")} |
| 42 | </button> |
| 43 | </div> |
| 44 | ); |
| 45 | } |
| 46 |