Basic web interface

web/src/components/ui/alert.jsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+
+const Alert = React.forwardRef(({ className, variant = "default", ...props }, ref) => {
+  const variants = {
+    default: "bg-background text-foreground",
+    destructive: "bg-destructive text-destructive-foreground"
+  }
+
+  return (
+    <div
+      ref={ref}
+      role="alert"
+      className={`relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground ${variants[variant]} ${className}`}
+      {...props}
+    />
+  )
+})
+Alert.displayName = "Alert"
+
+const AlertDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={`text-sm [&_p]:leading-relaxed ${className}`}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertDescription }