jnd/beszel-ipv6
1
0
Fork 0
mirror of https://github.com/henrygd/beszel.git synced 2026-03-24 22:46:16 +01:00
Code Issues Packages Projects Releases 2 Wiki Activity

move alerts ui to sheet component

Browse Source
This commit is contained in:
henrygd
2025-08-22 19:28:00 -04:00
parent 684d92c497
commit c158b1aeeb
8 changed files with 272 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
beszel/site/src/components/alerts/alert-button.tsx
View File

@@ -2,56 +2,35 @@ import { t } from "@lingui/core/macro"
import { memo, useMemo, useState } from "react"
import { useStore } from "@nanostores/react"
import { $alerts } from "@/lib/stores"
import { Dialog, DialogTrigger, DialogContent } from "@/components/ui/dialog"
import { BellIcon } from "lucide-react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { SystemRecord } from "@/types"
import { AlertDialogContent } from "./alerts-dialog"
import { AlertDialogContent } from "./alerts-sheet"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
export default memo(function AlertsButton({ system }: { system: SystemRecord }) {
const [opened, setOpened] = useState(false)
const alerts = useStore($alerts)
const hasSystemAlert = alerts[system.id]?.size > 0
return useMemo(
() => (
<Dialog>
<DialogTrigger asChild>
<Button variant="ghost" size="icon" aria-label={t`Alerts`} onClick={() => setOpened(true)}>
<Sheet>
<SheetTrigger asChild>
<Button variant="ghost" size="icon" aria-label={t`Alerts`} data-nolink onClick={() => setOpened(true)}>
<BellIcon
className={cn("h-[1.2em] w-[1.2em]", {
className={cn("h-[1.2em] w-[1.2em] pointer-events-none", {
"fill-primary": hasSystemAlert,
})}
/>
</Button>
</DialogTrigger>
<DialogContent className="max-h-full sm:max-h-[95svh] overflow-auto max-w-148">
</SheetTrigger>
<SheetContent className="max-h-full overflow-auto w-145 !max-w-full p-4 sm:p-6">
{opened && <AlertDialogContent system={system} />}
</DialogContent>
</Dialog>
</SheetContent>
</Sheet>
),
[opened, hasSystemAlert]
)
// return useMemo(
// () => (
// <Sheet>
// <SheetTrigger asChild>
// <Button variant="ghost" size="icon" aria-label={t`Alerts`} data-nolink onClick={() => setOpened(true)}>
// <BellIcon
// className={cn("h-[1.2em] w-[1.2em] pointer-events-none", {
// "fill-primary": hasAlert,
// })}
// />
// </Button>
// </SheetTrigger>
// <SheetContent className="max-h-full overflow-auto w-[35em] p-4 sm:p-5">
// {opened && <AlertDialogContent system={system} />}
// </SheetContent>
// </Sheet>
// ),
// [opened, hasAlert]
// )
})