alert

1import * as React from "react"
2import { cva, type VariantProps } from "class-variance-authority"
3import { cn } from "@/lib/utils"
4
5const alertVariants = cva(
6    "relative w-full rounded-base border-2 border-black p-4 shadow-brutal [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-black",
7    {
8        variants: {
9            variant: {
10                default: "bg-main text-black",
11                neutral: "bg-white text-black",
12                destructive: "bg-hot-pink text-black",
13                success: "bg-mint text-black",
14                warning: "bg-lemon text-black",
15            },
16        },
17        defaultVariants: {
18            variant: "default",
19        },
20    }
21)
22
23function InfoIcon(props: React.SVGProps<SVGSVGElement>) {
24    return (
25        <svg
26            xmlns="http://www.w3.org/2000/svg"
27            width="20"
28            height="20"
29            fill="currentColor"
30            viewBox="0 0 256 256"
31            {...props}
32        >
33            <path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z" />
34        </svg>
35    )
36}
37
38function ErrorIcon(props: React.SVGProps<SVGSVGElement>) {
39    return (
40        <svg
41            xmlns="http://www.w3.org/2000/svg"
42            width="20"
43            height="20"
44            fill="currentColor"
45            viewBox="0 0 256 256"
46            {...props}
47        >
48            <path d="M165.66,101.66,139.31,128l26.35,26.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z" />
49        </svg>
50    )
51}
52
53function SuccessIcon(props: React.SVGProps<SVGSVGElement>) {
54    return (
55        <svg
56            xmlns="http://www.w3.org/2000/svg"
57            width="20"
58            height="20"
59            fill="currentColor"
60            viewBox="0 0 256 256"
61            {...props}
62        >
63// … truncated