nginx-proxy-manager/frontend/src/components/SiteFooter.tsx

import { useCallback, useEffect, useState } from "react";
import { useHealth } from "src/hooks";
import { T } from "src/locale";

export function SiteFooter() {
    const health = useHealth();
    const [latestVersion, setLatestVersion] = useState<string | null>(null);
    const [isNewVersionAvailable, setIsNewVersionAvailable] = useState(false);

    const getVersion = useCallback(() => {
        if (!health.data) {
            return "";
        }
        const v = health.data.version;
        return `v${v.major}.${v.minor}.${v.revision}`;
    }, [health.data]);

    useEffect(() => {
        const checkForUpdates = async () => {
            try {
                const response = await fetch("/api/version/check");
                if (response.ok) {
                    const data = await response.json();
                    setLatestVersion(data.latest);
                    setIsNewVersionAvailable(data.updateAvailable);
                }
            } catch (error) {
                console.debug("Could not check for updates:", error);
            }
        };

        if (health.data) {
            checkForUpdates();
        }
    }, [health.data]);

    return (
        <footer className="footer d-print-none py-3">
            <div className="container-xl">
                <div className="row text-center align-items-center flex-row-reverse">
                    <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>
    );
}