54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import type { PropsWithChildren } from "react";
|
|
import { Indicator, Menu, Text } from "@mantine/core";
|
|
import { IconBellRinging } from "@tabler/icons-react";
|
|
|
|
import type { RouterOutputs } from "@homarr/api";
|
|
import { useScopedI18n } from "@homarr/translation/client";
|
|
|
|
interface UpdateIndicatorProps extends PropsWithChildren {
|
|
availableUpdates: RouterOutputs["updateChecker"]["getAvailableUpdates"] | undefined;
|
|
disabled: boolean;
|
|
}
|
|
|
|
export const UpdateIndicator = ({ children, availableUpdates, disabled }: UpdateIndicatorProps) => {
|
|
if (disabled || availableUpdates === undefined) {
|
|
return children;
|
|
}
|
|
|
|
return (
|
|
<Indicator disabled={availableUpdates.length === 0} size={15} processing withBorder>
|
|
{children}
|
|
</Indicator>
|
|
);
|
|
};
|
|
|
|
interface AvailableUpdatesMenuItemProps {
|
|
availableUpdates: RouterOutputs["updateChecker"]["getAvailableUpdates"] | undefined;
|
|
}
|
|
|
|
export const AvailableUpdatesMenuItem = ({ availableUpdates }: AvailableUpdatesMenuItemProps) => {
|
|
const t = useScopedI18n("common.userAvatar.menu");
|
|
if (availableUpdates === undefined || availableUpdates.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
const latestUpdate = availableUpdates.at(0);
|
|
if (!latestUpdate) return null;
|
|
|
|
return (
|
|
<>
|
|
<Menu.Item component={"a"} href={latestUpdate.url} target="_blank" leftSection={<IconBellRinging size="1rem" />}>
|
|
<Text fw="bold" size="sm">
|
|
{t("updateAvailable", {
|
|
countUpdates: String(availableUpdates.length),
|
|
tag: latestUpdate.tagName,
|
|
})}
|
|
</Text>
|
|
</Menu.Item>
|
|
<Menu.Divider />
|
|
</>
|
|
);
|
|
};
|