shoutrrr alerts / settings page

2025-12-17 10:46:16 +01:00 · 2024-09-12 19:39:27 -04:00
parent 2889d151ea
commit 9710d0d2f1
16 changed files with 450 additions and 78 deletions
--- a/beszel/site/src/components/ui/badge.tsx
+++ b/beszel/site/src/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }
--- a/beszel/site/src/components/ui/input-tags.tsx
+++ b/beszel/site/src/components/ui/input-tags.tsx
@@ -0,0 +1,81 @@
+import * as React from 'react'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { XIcon } from 'lucide-react'
+import { type InputProps } from './input'
+import { cn } from '@/lib/utils'
+
+type InputTagsProps = Omit<InputProps, 'value' | 'onChange'> & {
+	value: string[]
+	onChange: React.Dispatch<React.SetStateAction<string[]>>
+}
+
+const InputTags = React.forwardRef<HTMLInputElement, InputTagsProps>(
+	({ className, value, onChange, ...props }, ref) => {
+		const [pendingDataPoint, setPendingDataPoint] = React.useState('')
+
+		React.useEffect(() => {
+			if (pendingDataPoint.includes(',')) {
+				const newDataPoints = new Set([
+					...value,
+					...pendingDataPoint.split(',').map((chunk) => chunk.trim()),
+				])
+				onChange(Array.from(newDataPoints))
+				setPendingDataPoint('')
+			}
+		}, [pendingDataPoint, onChange, value])
+
+		const addPendingDataPoint = () => {
+			if (pendingDataPoint) {
+				const newDataPoints = new Set([...value, pendingDataPoint])
+				onChange(Array.from(newDataPoints))
+				setPendingDataPoint('')
+			}
+		}
+
+		return (
+			<div
+				className={cn(
+					'bg-background min-h-10 flex w-full flex-wrap gap-2 rounded-md border border-input px-3 py-2 text-sm  placeholder:text-muted-foreground has-[:focus-visible]:outline-none ring-offset-background has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring has-[:focus-visible]:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+					className
+				)}
+			>
+				{value.map((item) => (
+					<Badge key={item}>
+						{item}
+						<Button
+							variant="ghost"
+							size="icon"
+							className="ml-2 h-3 w-3"
+							onClick={() => {
+								onChange(value.filter((i) => i !== item))
+							}}
+						>
+							<XIcon className="w-3" />
+						</Button>
+					</Badge>
+				))}
+				<input
+					className="flex-1 outline-none bg-background placeholder:text-muted-foreground"
+					value={pendingDataPoint}
+					onChange={(e) => setPendingDataPoint(e.target.value)}
+					onKeyDown={(e) => {
+						if (e.key === 'Enter' || e.key === ',') {
+							e.preventDefault()
+							addPendingDataPoint()
+						} else if (e.key === 'Backspace' && pendingDataPoint.length === 0 && value.length > 0) {
+							e.preventDefault()
+							onChange(value.slice(0, -1))
+						}
+					}}
+					{...props}
+					ref={ref}
+				/>
+			</div>
+		)
+	}
+)
+
+InputTags.displayName = 'InputTags'
+
+export { InputTags }
--- a/beszel/site/src/components/ui/table.tsx
+++ b/beszel/site/src/components/ui/table.tsx
@@ -44,7 +44,7 @@ const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTML
 		<tr
 			ref={ref}
 			className={cn(
-				'border-b transition-colors hover:bg-muted/40 dark:hover:bg-muted/30 data-[state=selected]:bg-muted',
+				'border-b hover:bg-muted/40 dark:hover:bg-muted/30 data-[state=selected]:bg-muted',
 				className
 			)}
 			{...props}