36 lines
1.5 KiB
TypeScript
36 lines
1.5 KiB
TypeScript
import { Link } from "react-router";
|
|
import { useTranslation } from "react-i18next";
|
|
import clsx from "~/utils/shared/ClassesUtils";
|
|
import { adminPath } from "~/utils/app/CanonicalUrlUtils";
|
|
import { SparklesIcon } from "~/components/ui/icons/vendor";
|
|
|
|
export default function UpdateAvailableButton({ hasUpdate }: { hasUpdate: boolean }) {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<>
|
|
{hasUpdate && (
|
|
<div className="hidden divide-x divide-gray-300 rounded-sm shadow-none lg:inline-flex">
|
|
<div className="relative z-0 inline-flex rounded-full text-xs shadow-none sm:text-sm">
|
|
<Link
|
|
to={adminPath("settings", { mode: "host-aware" })}
|
|
className={clsx(
|
|
"text-muted-foreground bg-secondary border-border relative inline-flex items-center space-x-1 rounded-md border p-2 font-medium shadow-inner hover:bg-teal-50 hover:text-teal-800 focus:z-10 focus:bg-teal-100 focus:text-teal-900 focus:outline-hidden",
|
|
" border-green-200 bg-green-50 text-green-800 hover:bg-green-100 hover:text-green-900 focus:z-10 focus:bg-green-100 focus:text-green-900 focus:outline-hidden"
|
|
)}
|
|
aria-haspopup="listbox"
|
|
aria-expanded="true"
|
|
aria-labelledby="listbox-label"
|
|
>
|
|
<div>
|
|
<span>{t("shell.updateAvailable")}</span>
|
|
</div>
|
|
<SparklesIcon className="h-4 w-4" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|