mokkenstorm.dev
because I got bored of customising my CV for every job
1import { cva, type VariantProps } from "class-variance-authority";
2
3const iconVariants = cva("w-5 h-5", {
4 variants: {
5 level: {
6 success: "text-green-600",
7 warning: "text-yellow-600",
8 info: "text-blue-600",
9 error: "text-red-600",
10 },
11 },
12 defaultVariants: {
13 level: "info",
14 },
15});
16
17interface ToastIconProps extends VariantProps<typeof iconVariants> {
18 level: "success" | "warning" | "info" | "error";
19}
20
21/**
22 * Toast icon component with CVA styling
23 */
24export const ToastIcon = ({ level }: ToastIconProps) => {
25 const iconProps = {
26 className: iconVariants({ level }),
27 fill: "none",
28 stroke: "currentColor",
29 viewBox: "0 0 24 24",
30 };
31
32 return (
33 <svg {...iconProps}>
34 <title>{level.charAt(0).toUpperCase() + level.slice(1)} icon</title>
35 <path
36 strokeLinecap="round"
37 strokeLinejoin="round"
38 strokeWidth={2}
39 d={getIconPath(level)}
40 />
41 </svg>
42 );
43};
44
45/**
46 * Get the SVG path for the given toast level
47 */
48function getIconPath(level: "success" | "warning" | "info" | "error"): string {
49 const iconPaths = {
50 success: "M5 13l4 4L19 7",
51 warning:
52 "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z",
53 info: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
54 error: "M6 18L18 6M6 6l12 12",
55 };
56
57 return iconPaths[level];
58}