OpenRewind/components/settings/EnvironmentDetails.tsx

52 lines
1.4 KiB
TypeScript

import { useTranslation } from "react-i18next";
import { useEffect, useState } from "react";
export default function EnvironmentDetails() {
const { t } = useTranslation();
const [electronVersion, setElectronVersion] = useState("");
const [chromeVersion, setChromeVersion] = useState("");
const [systemVersion, setSystemVersion] = useState("");
const [systemDisplayVersion, setSystemDisplayVersion] = useState("");
const [nodeVersion, setNodeVersion] = useState("");
useEffect(() => {
try {
setChromeVersion(window.versions.chrome());
setSystemVersion(window.versions.osRaw());
setSystemDisplayVersion(window.versions.osDisplay());
setElectronVersion(window.versions.electron());
setNodeVersion(window.versions.node());
} catch {
// ignore
}
}, []);
return (
<div className="mt-2">
<h2 className="text-xl font-bold leading-8">{t("settings.environment-details")}</h2>
<div className="text-xs leading-5 text-weaken">
<ul>
<li>
<span>{t("settings.chrome-version")}: </span>
{chromeVersion}
</li>
<li>
<span>{t("settings.electron-version")}: </span>
{electronVersion}
</li>
<li>
<span>{t("settings.node-version")}: </span>
{nodeVersion}
</li>
<li>
<span>{t("settings.os-version")}: </span>
{systemVersion}
</li>
<li>
<span>{t("settings.os")}: </span>
{systemDisplayVersion}
</li>
</ul>
</div>
</div>
);
}