chatbot-ui/components/utility/alerts.tsx

31 lines
876 B
TypeScript

import {
Popover,
PopoverContent,
PopoverTrigger
} from "@/components/ui/popover"
import { IconBell } from "@tabler/icons-react"
import { FC } from "react"
import { SIDEBAR_ICON_SIZE } from "../sidebar/sidebar-switcher"
interface AlertsProps {}
export const Alerts: FC<AlertsProps> = () => {
return (
<Popover>
<PopoverTrigger asChild>
<div className="relative cursor-pointer hover:opacity-50">
<IconBell size={SIDEBAR_ICON_SIZE} />
{1 > 0 && (
<span className="notification-indicator absolute right-[-4px] top-[-4px] flex size-4 items-center justify-center rounded-full bg-red-600 text-[10px] text-white">
1
</span>
)}
</div>
</PopoverTrigger>
<PopoverContent className="mb-2 w-80">
<div>placeholder</div>
</PopoverContent>
</Popover>
)
}