openstatus.dev
Openstatus
www.openstatus.dev
1import { cva } from "class-variance-authority";
2import type { VariantProps } from "class-variance-authority";
3import * as React from "react";
4
5import { cn } from "../lib/utils";
6
7const alertVariants = cva(
8 "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",
9 {
10 variants: {
11 variant: {
12 default: "bg-background text-foreground",
13 destructive:
14 "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
15 },
16 },
17 defaultVariants: {
18 variant: "default",
19 },
20 }
21);
22
23const Alert = React.forwardRef<
24 HTMLDivElement,
25 React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
26>(({ className, variant, ...props }, ref) => (
27 <div
28 ref={ref}
29 role="alert"
30 className={cn(alertVariants({ variant }), className)}
31 {...props}
32 />
33));
34Alert.displayName = "Alert";
35
36const AlertTitle = React.forwardRef<
37 HTMLParagraphElement,
38 React.HTMLAttributes<HTMLHeadingElement>
39>(({ className, ...props }, ref) => (
40 <h5
41 ref={ref}
42 className={cn("mb-1 font-medium leading-none tracking-tight", className)}
43 {...props}
44 />
45));
46AlertTitle.displayName = "AlertTitle";
47
48const AlertDescription = React.forwardRef<
49 HTMLParagraphElement,
50 React.HTMLAttributes<HTMLParagraphElement>
51>(({ className, ...props }, ref) => (
52 <div
53 ref={ref}
54 className={cn("text-sm [&_p]:leading-relaxed", className)}
55 {...props}
56 />
57));
58AlertDescription.displayName = "AlertDescription";
59
60export { Alert, AlertTitle, AlertDescription };