ThatGuyJack/nginx-proxy-manager
1
0
Fork 0
mirror of https://github.com/NginxProxyManager/nginx-proxy-manager.git synced 2025-11-13 05:45:15 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update SiteFooter.tsx

Browse Source
This commit is contained in:
Konstantinos Spartalis
2025-11-10 19:43:38 +02:00
parent 311d6a1541
commit 990ba28831
1 changed files with 117 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
frontend/src/components/SiteFooter.tsx
View File

@@ -1,64 +1,123 @@
import { useEffect, useState } from "react";
import { useHealth } from "src/hooks"; import { useHealth } from "src/hooks";
import { T } from "src/locale"; import { T } from "src/locale";
export function SiteFooter() { export function SiteFooter() {
const health = useHealth(); const health = useHealth();
const [latestVersion, setLatestVersion] = useState<string | null>(null);
const [isNewVersionAvailable, setIsNewVersionAvailable] = useState(false);
const getVersion = () => { const getVersion = () => {
if (!health.data) { if (!health.data) {
return ""; return "";
} }
const v = health.data.version; const v = health.data.version;
return `v${v.major}.${v.minor}.${v.revision}`; return `v${v.major}.${v.minor}.${v.revision}`;
}; };
return ( const compareVersions = (current: string, latest: string): boolean => {
<footer className="footer d-print-none py-3"> const cleanCurrent = current.replace(/^v/, "");
<div className="container-xl"> const cleanLatest = latest.replace(/^v/, "");
<div className="row text-center align-items-center flex-row-reverse">
<div className="col-lg-auto ms-lg-auto"> const currentParts = cleanCurrent.split(".").map(Number);
<ul className="list-inline list-inline-dots mb-0"> const latestParts = cleanLatest.split(".").map(Number);
<li className="list-inline-item">
<a for (let i = 0; i < Math.max(currentParts.length, latestParts.length); i++) {
href="https://github.com/NginxProxyManager/nginx-proxy-manager" const curr = currentParts[i] || 0;
target="_blank" const lat = latestParts[i] || 0;
className="link-secondary"
rel="noopener" if (lat > curr) return true;
> if (lat < curr) return false;
<T id="footer.github-fork" /> }
</a> return false;
</li> };
</ul>
</div> useEffect(() => {
<div className="col-12 col-lg-auto mt-3 mt-lg-0"> const checkForUpdates = async () => {
<ul className="list-inline list-inline-dots mb-0"> try {
<li className="list-inline-item"> const response = await fetch(
© 2025{" "} "https://api.github.com/repos/NginxProxyManager/nginx-proxy-manager/releases/latest"
<a href="https://jc21.com" rel="noreferrer" target="_blank" className="link-secondary"> );
jc21.com if (response.ok) {
</a> const data = await response.json();
</li> const latest = data.tag_name;
<li className="list-inline-item"> setLatestVersion(latest);
Theme by{" "}
<a href="https://tabler.io" rel="noreferrer" target="_blank" className="link-secondary"> const currentVersion = "2.12.1";
Tabler if (currentVersion && compareVersions(currentVersion, latest)) {
</a> setIsNewVersionAvailable(true);
</li> }
<li className="list-inline-item"> }
<a } catch (error) {
href={`https://github.com/NginxProxyManager/nginx-proxy-manager/releases/tag/${getVersion()}`} console.debug("Could not check for updates:", error);
className="link-secondary" }
target="_blank" };
rel="noopener"
> if (health.data) {
{" "} checkForUpdates();
{getVersion()}{" "} }
</a> }, [health.data]);
</li>
</ul> return (
</div> <footer className="footer d-print-none py-3">
</div> <div className="container-xl">
</div> <div className="row text-center align-items-center flex-row-reverse">
</footer> <div className="col-lg-auto ms-lg-auto">
); <ul className="list-inline list-inline-dots mb-0">
} <li className="list-inline-item">
<a
href="https://github.com/NginxProxyManager/nginx-proxy-manager"
target="_blank"
className="link-secondary"
rel="noopener"
>
<T id="footer.github-fork" />
</a>
</li>
</ul>
</div>
<div className="col-12 col-lg-auto mt-3 mt-lg-0">
<ul className="list-inline list-inline-dots mb-0">
<li className="list-inline-item">
© 2025{" "}
<a href="https://jc21.com" rel="noreferrer" target="_blank" className="link-secondary">
jc21.com
</a>
</li>
<li className="list-inline-item">
Theme by{" "}
<a href="https://tabler.io" rel="noreferrer" target="_blank" className="link-secondary">
Tabler
</a>
</li>
<li className="list-inline-item">
<a
href={`https://github.com/NginxProxyManager/nginx-proxy-manager/releases/tag/${getVersion()}`}
className="link-secondary"
target="_blank"
rel="noopener"
>
{" "}
{getVersion()}{" "}
</a>
</li>
{isNewVersionAvailable && latestVersion && (
<li className="list-inline-item">
<a
href={`https://github.com/NginxProxyManager/nginx-proxy-manager/releases/tag/${latestVersion}`}
className="link-warning fw-bold"
target="_blank"
rel="noopener"
title={`New version ${latestVersion} is available`}
>
Update Available: ({latestVersion})
</a>
</li>
)}
</ul>
</div>
</div>
</div>
</footer>
);
}