Spaces:
Paused
Paused
import * as React from "react" | |
import { cva, type VariantProps } from "class-variance-authority" | |
import { cn } from "@/lib/utils" | |
const alertVariants = cva( | |
"relative w-full rounded-lg border border-stone-200 p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-stone-950 dark:border-stone-800 dark:[&>svg]:text-stone-50", | |
{ | |
variants: { | |
variant: { | |
default: "bg-white text-stone-950 dark:bg-stone-950 dark:text-stone-50", | |
destructive: | |
"border-red-500/50 text-red-500 dark:border-red-500 [&>svg]:text-red-500 dark:border-red-900/50 dark:text-red-900 dark:dark:border-red-900 dark:[&>svg]:text-red-900", | |
}, | |
}, | |
defaultVariants: { | |
variant: "default", | |
}, | |
} | |
) | |
const Alert = React.forwardRef< | |
HTMLDivElement, | |
React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants> | |
>(({ className, variant, ...props }, ref) => ( | |
<div | |
ref={ref} | |
role="alert" | |
className={cn(alertVariants({ variant }), className)} | |
{...props} | |
/> | |
)) | |
Alert.displayName = "Alert" | |
const AlertTitle = React.forwardRef< | |
HTMLParagraphElement, | |
React.HTMLAttributes<HTMLHeadingElement> | |
>(({ className, ...props }, ref) => ( | |
<h5 | |
ref={ref} | |
className={cn("mb-1 font-medium leading-none tracking-tight", className)} | |
{...props} | |
/> | |
)) | |
AlertTitle.displayName = "AlertTitle" | |
const AlertDescription = React.forwardRef< | |
HTMLParagraphElement, | |
React.HTMLAttributes<HTMLParagraphElement> | |
>(({ className, ...props }, ref) => ( | |
<div | |
ref={ref} | |
className={cn("text-sm [&_p]:leading-relaxed", className)} | |
{...props} | |
/> | |
)) | |
AlertDescription.displayName = "AlertDescription" | |
export { Alert, AlertTitle, AlertDescription } | |