Alert

1"use client"
2 
3import * as React from 'react'
4import { cva, type VariantProps } from 'class-variance-authority'
5import { cn } from '@/lib/utils'
6 
7const alertVariants = cva(
8  'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
9  {
10    variants: {
11      variant: {
12        default: 'bg-card text-card-foreground',
13        destructive:
14          'bg-destructive/10 text-destructive border-destructive/30 [&>svg]:text-destructive *:data-[slot=alert-description]:text-destructive/90',
15        warning:
16          'bg-warning/10 text-warning border-warning/30 [&>svg]:text-warning *:data-[slot=alert-description]:text-warning/90',
17        success:
18          'bg-success/10 text-success border-success/30 [&>svg]:text-success *:data-[slot=alert-description]:text-success/90',
19        info:
20          'bg-info/10 text-info border-info/30 [&>svg]:text-info *:data-[slot=alert-description]:text-info/90',
21      },
22    },
23    defaultVariants: {
24      variant: 'default',
25    },
26  }
27)
28 
29function Alert({
30  className,
31  variant,
32  ...props
33}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
34  return (
35    <div
36      data-slot='alert'
37      role='alert'
38      className={cn(alertVariants({ variant }), className)}
39      {...props}
40    />
41  )
42}
43 
44function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
45  return (
46    <div
47      data-slot='alert-title'
48      className={cn(
49        'col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight',
50        className
51      )}
52      {...props}
53    />
54  )
55}
56 
57function AlertDescription({
58  className,
59  ...props
60}: React.ComponentProps<'div'>) {
61  return (
62    <div
63      data-slot='alert-description'
64      className={cn(
65        'col-start-2 text-sm leading-[1.55] text-pretty text-muted-foreground [&>p+p]:mt-1.5',
66        className
67      )}
68      {...props}
69    />
70  )
71}
72 
73export { Alert, AlertTitle, AlertDescription }