Set width based on address length

This commit is contained in:
0x1eef 2024-04-05 14:50:55 -03:00
parent 6d6639718f
commit 86a82fe25e
2 changed files with 18 additions and 3 deletions

View file

@ -4,8 +4,7 @@ export function ErrorRenderer({ error }: { error: Error }) {
const t = chrome.i18n.getMessage; const t = chrome.i18n.getMessage;
return ( return (
<div data-testid="error" className="w-full h-48"> <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 className="flex flex-col h-5/6 justify-center w-3/4 m-auto"></div>
</div>
<footer className="flex items-center justify-center h-10"> <footer className="flex items-center justify-center h-10">
<span className="font-bold">{t("error")}</span>: {error.message} <span className="font-bold">{t("error")}</span>: {error.message}
</footer> </footer>

View file

@ -1,9 +1,25 @@
import React, { ReactNode } from "react"; import React, { useEffect, ReactNode } from "react";
import { TResponse } from "~/lib/response"; import { TResponse } from "~/lib/response";
type TFunction = typeof chrome.i18n.getMessage; type TFunction = typeof chrome.i18n.getMessage;
export function ResponseRenderer({ response }: { response: TResponse }) { export function ResponseRenderer({ response }: { response: TResponse }) {
const t = chrome.i18n.getMessage; 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 ( return (
<div className="w-full h-48"> <div className="w-full h-48">
<div className="flex flex-col h-5/6 justify-center w-3/4 m-auto" data-testid="response"> <div className="flex flex-col h-5/6 justify-center w-3/4 m-auto" data-testid="response">