magicui
59 строк · 1.6 Кб
1import * as React from "react";
2import { cva, type VariantProps } from "class-variance-authority";
3
4import { cn } from "@/lib/utils";
5
6const alertVariants = cva(
7"relative w-full rounded-lg border px-4 py-3 text-sm [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
8{
9variants: {
10variant: {
11default: "bg-background text-foreground",
12destructive:
13"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
14},
15},
16defaultVariants: {
17variant: "default",
18},
19},
20);
21
22const Alert = React.forwardRef<
23HTMLDivElement,
24React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
25>(({ className, variant, ...props }, ref) => (
26<div
27ref={ref}
28role="alert"
29className={cn(alertVariants({ variant }), className)}
30{...props}
31/>
32));
33Alert.displayName = "Alert";
34
35const AlertTitle = React.forwardRef<
36HTMLParagraphElement,
37React.HTMLAttributes<HTMLHeadingElement>
38>(({ className, ...props }, ref) => (
39<h5
40ref={ref}
41className={cn("mb-1 font-medium leading-none tracking-tight", className)}
42{...props}
43/>
44));
45AlertTitle.displayName = "AlertTitle";
46
47const AlertDescription = React.forwardRef<
48HTMLParagraphElement,
49React.HTMLAttributes<HTMLParagraphElement>
50>(({ className, ...props }, ref) => (
51<div
52ref={ref}
53className={cn("text-sm [&_p]:leading-relaxed", className)}
54{...props}
55/>
56));
57AlertDescription.displayName = "AlertDescription";
58
59export { Alert, AlertTitle, AlertDescription };
60