Set width based on address length
This commit is contained in:
parent
6d6639718f
commit
86a82fe25e
2 changed files with 18 additions and 3 deletions
|
@ -4,8 +4,7 @@ export function ErrorRenderer({ error }: { error: Error }) {
|
|||
const t = chrome.i18n.getMessage;
|
||||
return (
|
||||
<div data-testid="error" className="w-full h-48">
|
||||
<div className="flex flex-col h-5/6 justify-center w-3/4 m-auto">
|
||||
</div>
|
||||
<div className="flex flex-col h-5/6 justify-center w-3/4 m-auto"></div>
|
||||
<footer className="flex items-center justify-center h-10">
|
||||
<span className="font-bold">{t("error")}</span>: {error.message}
|
||||
</footer>
|
||||
|
|
|
@ -1,9 +1,25 @@
|
|||
import React, { ReactNode } from "react";
|
||||
import React, { useEffect, ReactNode } from "react";
|
||||
import { TResponse } from "~/lib/response";
|
||||
type TFunction = typeof chrome.i18n.getMessage;
|
||||
|
||||
export function ResponseRenderer({ response }: { response: TResponse }) {
|
||||
const t = chrome.i18n.getMessage;
|
||||
|
||||
useEffect(() => {
|
||||
const { body } = document;
|
||||
const width = (() => {
|
||||
const addr = response.IPAddress;
|
||||
if (addr.length >= 30) {
|
||||
return 525;
|
||||
} else if (addr.length >= 20) {
|
||||
return 450;
|
||||
} else {
|
||||
return 400;
|
||||
}
|
||||
})();
|
||||
body.style.width = `${width}px`;
|
||||
}, [response]);
|
||||
|
||||
return (
|
||||
<div className="w-full h-48">
|
||||
<div className="flex flex-col h-5/6 justify-center w-3/4 m-auto" data-testid="response">
|
||||
|
|
Loading…
Reference in a new issue