57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { HTMLAttributes, ReactNode } from "react";
|
|
|
|
interface AlertProps extends HTMLAttributes<HTMLDivElement> {
|
|
children: ReactNode;
|
|
variant?: "success" | "error" | "warning" | "info";
|
|
}
|
|
|
|
const variantClasses = {
|
|
success: "border",
|
|
error: "border",
|
|
warning: "border",
|
|
info: "border",
|
|
};
|
|
|
|
export default function Alert({
|
|
children,
|
|
variant = "info",
|
|
className = "",
|
|
...props
|
|
}: AlertProps) {
|
|
const variantStyles = {
|
|
success: {
|
|
backgroundColor: "color-mix(in srgb, var(--success) 20%, transparent)",
|
|
borderColor: "color-mix(in srgb, var(--success) 50%, transparent)",
|
|
color: "var(--success)",
|
|
},
|
|
error: {
|
|
backgroundColor: "color-mix(in srgb, var(--destructive) 20%, transparent)",
|
|
borderColor: "color-mix(in srgb, var(--destructive) 50%, transparent)",
|
|
color: "var(--destructive)",
|
|
},
|
|
warning: {
|
|
backgroundColor: "color-mix(in srgb, var(--yellow) 20%, transparent)",
|
|
borderColor: "color-mix(in srgb, var(--yellow) 50%, transparent)",
|
|
color: "var(--yellow)",
|
|
},
|
|
info: {
|
|
backgroundColor: "color-mix(in srgb, var(--blue) 20%, transparent)",
|
|
borderColor: "color-mix(in srgb, var(--blue) 50%, transparent)",
|
|
color: "var(--blue)",
|
|
},
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`border rounded px-4 py-3 text-sm ${variantClasses[variant]} ${className}`}
|
|
style={variantStyles[variant]}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|