components/Alerts/Callout.tsx

import { ReactNode } from "react";
import { IconType } from "react-icons";
import {
    MdCheckCircle,
    MdError,
    MdInfo,
    MdNoteAlt,
    MdWarning,
} from "react-icons/md";

type CalloutProps = {
    children?: ReactNode;
    type: "info" | "warning" | "danger" | "success" | "note";
    hideHeading?: boolean;
    hideIcon?: boolean;
    title?: string;
};

const styles: Record<CalloutProps["type"], string> = {
    danger: "bg-red-500 before:bg-red-600 [--tw-bg-opacity:0.2]",
    info: "bg-[rgba(0,123,255,0.2)] before:bg-blue-600",
    note: "bg-[rgba(255,255,255,0.2)] before:bg-white",
    success: "bg-green-500 before:bg-green-600 [--tw-bg-opacity:0.2]",
    warning: "bg-yellow-500 before:bg-yellow-600 [--tw-bg-opacity:0.2]",
};

const headingStyles: Record<CalloutProps["type"], string> = {
    danger: "text-red-500",
    info: "text-white",
    note: "text-white",
    success: "text-green-500",
    warning: "text-yellow-600",
};

const icons: Record<CalloutProps["type"], IconType> = {
    note: MdNoteAlt,
    danger: MdError,
    info: MdInfo,
    success: MdCheckCircle,
    warning: MdWarning,
};

export default function Callout({
    type,
    children,
    hideHeading = false,
    hideIcon = false,
    title,
}: CalloutProps) {
    const Icon = icons[type];
    return (
        <div
            className={`${
                hideHeading ? "flex items-center gap-5" : ""
            } my-3 p-3 pl-5 overflow-hidden relative rounded-md before:absolute before:left-0 before:h-[100%] before:top-0 before:w-[3px] ${
                styles[type]
            }`}
        >
            {!hideIcon && !hideHeading && (
                <div
                    className={`flex items-center gap-3 mb-3 ${headingStyles[type]}`}
                >
                    <Icon size={25} />
                    <span className="font-bold">
                        {title ??
                            `${type[0].toUpperCase()}${type.substring(1)}`}
                    </span>
                </div>
            )}
            {!hideIcon && hideHeading && (
                <div>
                    <Icon size={25} />
                </div>
            )}
            <div className="*:m-0 *:p-0">{children}</div>
        </div>
    );
}
1	import { ReactNode } from "react";
2	import { IconType } from "react-icons";
3	import {
4	MdCheckCircle,
5	MdError,
6	MdInfo,
7	MdNoteAlt,
8	MdWarning,
9	} from "react-icons/md";
10
11	type CalloutProps = {
12	children?: ReactNode;
13	type: "info" \| "warning" \| "danger" \| "success" \| "note";
14	hideHeading?: boolean;
15	hideIcon?: boolean;
16	title?: string;
17	};
18
19	const styles: Record<CalloutProps["type"], string> = {
20	danger: "bg-red-500 before:bg-red-600 [--tw-bg-opacity:0.2]",
21	info: "bg-[rgba(0,123,255,0.2)] before:bg-blue-600",
22	note: "bg-[rgba(255,255,255,0.2)] before:bg-white",
23	success: "bg-green-500 before:bg-green-600 [--tw-bg-opacity:0.2]",
24	warning: "bg-yellow-500 before:bg-yellow-600 [--tw-bg-opacity:0.2]",
25	};
26
27	const headingStyles: Record<CalloutProps["type"], string> = {
28	danger: "text-red-500",
29	info: "text-white",
30	note: "text-white",
31	success: "text-green-500",
32	warning: "text-yellow-600",
33	};
34
35	const icons: Record<CalloutProps["type"], IconType> = {
36	note: MdNoteAlt,
37	danger: MdError,
38	info: MdInfo,
39	success: MdCheckCircle,
40	warning: MdWarning,
41	};
42
43	export default function Callout({
44	type,
45	children,
46	hideHeading = false,
47	hideIcon = false,
48	title,
49	}: CalloutProps) {
50	const Icon = icons[type];
51	return (
52	<div
53	className={`${
54	hideHeading ? "flex items-center gap-5" : ""
55	} my-3 p-3 pl-5 overflow-hidden relative rounded-md before:absolute before:left-0 before:h-[100%] before:top-0 before:w-[3px] ${
56	styles[type]
57	}`}
58	>
59	{!hideIcon && !hideHeading && (
60	<div
61	className={`flex items-center gap-3 mb-3 ${headingStyles[type]}`}
62	>
63	<Icon size={25} />
64	<span className="font-bold">
65	{title ??
66	`${type[0].toUpperCase()}${type.substring(1)}`}
67	</span>
68	</div>
69	)}
70	{!hideIcon && hideHeading && (
71	<div>
72	<Icon size={25} />
73	</div>
74	)}
75	<div className=":m-0 :p-0">{children}</div>
76	</div>
77	);
78	}