61 lines
2.5 KiB
TypeScript
61 lines
2.5 KiB
TypeScript
import clsx from "clsx";
|
|
import { useTranslation } from "react-i18next";
|
|
import { UI_ACTION_IDS } from "~/application/ui/uiRegistry";
|
|
import { BellIcon } from "~/components/ui/icons/vendor";
|
|
|
|
interface Props {
|
|
unseenCount?: number;
|
|
to: string;
|
|
}
|
|
export default function NotificationsButton({ unseenCount, to }: Props) {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<div className="relative">
|
|
<div className="inline-flex divide-x divide-gray-300 rounded-sm shadow-none">
|
|
<a
|
|
href={to}
|
|
data-ui-id={UI_ACTION_IDS.notifications}
|
|
aria-label={t("shell.notifications.ariaLabel")}
|
|
className={clsx(
|
|
"text-muted-foreground bg-secondary hover:bg-secondary/90 border-border relative inline-flex items-center rounded-full border p-2 font-medium shadow-inner focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
|
|
)}
|
|
>
|
|
<span className="relative inline-block h-5 w-5 overflow-hidden rounded-full">
|
|
<BellIcon className="h-5 w-5" />
|
|
</span>
|
|
{unseenCount?.toString() !== "0" && (
|
|
<span className="absolute inset-0 -mr-6 object-right-top">
|
|
<div className="inline-flex items-center rounded-full border-2 border-white bg-red-500 px-1.5 py-0.5 text-xs font-semibold leading-4 text-white">
|
|
{unseenCount}
|
|
</div>
|
|
</span>
|
|
)}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
// <div className="w-full flex md:ml-0">
|
|
// <div className="align-baseline w-full text-slate-200 pl-1">
|
|
// <div className="w-full">
|
|
// <label htmlFor="command-palette" className="sr-only">
|
|
// {t("shared.commandPalette")}
|
|
// </label>
|
|
// <div className="relative text-muted-foreground hover:text-muted-foreground truncate">
|
|
|
|
// <button
|
|
// type="button"
|
|
// onClick={onOpenCommandPalette}
|
|
// className="flex space-x-2 text-left w-full pl-3 pr-3 py-1.5 text-sm sm:py-2 border border-border rounded-md leading-5 bg-secondary text-muted-foreground focus:outline-hidden hover:ring-0 hover:placeholder-gray-500 hover:text-muted-foreground truncate"
|
|
// >
|
|
// <div className="font-medium hidden lg:block">⌘K</div>
|
|
// <div className="hidden lg:block truncate">{t("shared.commandPalette")}</div>
|
|
// <div className="lg:hidden">{t("shared.search")}</div>
|
|
// </button>
|
|
// </div>
|
|
// </div>
|
|
// </div>
|
|
// </div>
|
|
}
|