mirror of
https://github.com/netbirdio/netbird.git
synced 2026-05-17 14:19:54 +00:00
update about
This commit is contained in:
Eduard Gert
@@ -1,6 +1,6 @@
|
|||||||
import { Browser } from "@wailsio/runtime";
|
import { Browser } from "@wailsio/runtime";
|
||||||
import { Update as UpdateSvc } from "@bindings/services";
|
import { Update as UpdateSvc } from "@bindings/services";
|
||||||
import netbirdAppIcon from "@/assets/logos/netbird-app-icon.svg";
|
import netbirdFull from "@/assets/logos/netbird-full.svg";
|
||||||
import pkg from "../../../package.json";
|
import pkg from "../../../package.json";
|
||||||
import { useStatus } from "@/hooks/useStatus";
|
import { useStatus } from "@/hooks/useStatus";
|
||||||
import { Button } from "@/components/Button";
|
import { Button } from "@/components/Button";
|
||||||
@@ -16,6 +16,16 @@ function openUrl(url: string) {
|
|||||||
void Browser.OpenURL(url).catch(() => window.open(url, "_blank"));
|
void Browser.OpenURL(url).catch(() => window.open(url, "_blank"));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function formatLastChecked(date: Date) {
|
||||||
|
return date.toLocaleString(undefined, {
|
||||||
|
year: "numeric",
|
||||||
|
month: "short",
|
||||||
|
day: "numeric",
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "2-digit",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
export function SettingsAbout() {
|
export function SettingsAbout() {
|
||||||
const { status } = useStatus();
|
const { status } = useStatus();
|
||||||
const guiVersion = pkg.version;
|
const guiVersion = pkg.version;
|
||||||
@@ -30,28 +40,23 @@ export function SettingsAbout() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={"flex flex-col gap-5 max-w-2xl"}>
|
<div
|
||||||
<div className={"flex gap-6 items-center"}>
|
className={
|
||||||
<img
|
"flex flex-col items-center justify-center gap-4 max-w-2xl mx-auto min-h-[calc(100vh-10rem)]"
|
||||||
src={netbirdAppIcon}
|
}
|
||||||
alt={"NetBird"}
|
>
|
||||||
className={
|
<img src={netbirdFull} alt={"NetBird"} className={"h-7 w-auto"} />
|
||||||
"w-24 h-24 rounded-2xl shrink-0 border border-nb-gray-800"
|
<div className={"flex flex-col items-center gap-0.5 text-center"}>
|
||||||
}
|
<p className={"text-sm font-semibold text-nb-gray-100"}>
|
||||||
/>
|
NetBird Client v{daemonVersion}
|
||||||
<div className={"flex-1 min-w-0 flex flex-col gap-2"}>
|
</p>
|
||||||
<h2 className={"text-2xl font-semibold"}>NetBird</h2>
|
<p className={"text-sm text-nb-gray-300"}>GUI v{guiVersion}</p>
|
||||||
<div className={"text-sm text-nb-gray-300 space-y-0.5"}>
|
|
||||||
<div>GUI v{guiVersion}</div>
|
|
||||||
<div>Client v{daemonVersion}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{updateVersion && (
|
{updateVersion ? (
|
||||||
<div
|
<div
|
||||||
className={
|
className={
|
||||||
"flex items-center justify-between gap-4 rounded-md border border-nb-gray-800 bg-nb-gray-920 px-4 py-3"
|
"w-full max-w-md flex items-center justify-between gap-4 rounded-md border border-nb-gray-800 bg-nb-gray-910 px-4 py-3"
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -65,47 +70,45 @@ export function SettingsAbout() {
|
|||||||
`https://github.com/netbirdio/netbird/releases/tag/v${updateVersion}`,
|
`https://github.com/netbirdio/netbird/releases/tag/v${updateVersion}`,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
className={"text-xs text-netbird hover:underline"}
|
className={
|
||||||
|
"text-sm text-netbird hover:underline hover:underline-offset-4 hover:decoration-[0.5px] font-medium"
|
||||||
|
}
|
||||||
>
|
>
|
||||||
What's new?
|
What's new?
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<Button
|
<Button variant={"primary"} size={"xs"} onClick={triggerUpdate}>
|
||||||
variant={"primary"}
|
Restart Now
|
||||||
size={"sm"}
|
</Button>
|
||||||
onClick={triggerUpdate}
|
</div>
|
||||||
>
|
) : (
|
||||||
Restart now
|
<div className={"flex flex-col items-center gap-2"}>
|
||||||
|
<p className={"text-xs text-nb-gray-400 text-center"}>
|
||||||
|
Last checked for updates on {formatLastChecked(new Date())}
|
||||||
|
</p>
|
||||||
|
<Button variant={"secondary"} size={"sm"} onClick={triggerUpdate}>
|
||||||
|
Check for updates
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<p className={"text-xs text-nb-gray-500"}>
|
<p className={"text-sm text-nb-gray-300 text-center"}>
|
||||||
© {new Date().getFullYear()} NetBird. All Rights Reserved.
|
© {new Date().getFullYear()} NetBird. All Rights Reserved.
|
||||||
</p>
|
</p>
|
||||||
<div
|
<div
|
||||||
className={
|
className={"flex flex-wrap justify-center gap-x-4 gap-y-1 text-xs text-nb-gray-200"}
|
||||||
"flex flex-wrap gap-x-3 gap-y-1 text-xs text-nb-gray-400"
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
{LEGAL_LINKS.map((link, i) => (
|
{LEGAL_LINKS.map((link) => (
|
||||||
<span key={link.url} className={"flex items-center"}>
|
<button
|
||||||
{i > 0 && (
|
key={link.url}
|
||||||
<span
|
type={"button"}
|
||||||
className={"mr-3 text-nb-gray-700"}
|
onClick={() => openUrl(link.url)}
|
||||||
aria-hidden
|
className={
|
||||||
>
|
"decoration-[0.5px] underline-offset-4 hover:text-nb-gray-100 hover:underline transition"
|
||||||
·
|
}
|
||||||
</span>
|
>
|
||||||
)}
|
{link.label}
|
||||||
<button
|
</button>
|
||||||
type={"button"}
|
|
||||||
onClick={() => openUrl(link.url)}
|
|
||||||
className={"hover:text-nb-gray-200 transition"}
|
|
||||||
>
|
|
||||||
{link.label}
|
|
||||||
</button>
|
|
||||||
</span>
|
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user