oiov
85 lines
1.9 KiB
TypeScript
85 lines
1.9 KiB
TypeScript
import {
|
|
AlertTriangle,
|
|
Ban,
|
|
CircleAlert,
|
|
CircleCheckBig,
|
|
FileText,
|
|
Info,
|
|
Lightbulb,
|
|
} from "lucide-react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface CalloutProps {
|
|
twClass?: string;
|
|
children?: React.ReactNode;
|
|
type?: keyof typeof dataCallout;
|
|
}
|
|
|
|
const dataCallout = {
|
|
default: {
|
|
icon: Info,
|
|
classes:
|
|
"border-zinc-200 bg-gray-50 text-zinc-900 dark:bg-zinc-800 dark:text-zinc-200",
|
|
},
|
|
danger: {
|
|
icon: CircleAlert,
|
|
classes:
|
|
"border-red-200 bg-red-50 text-red-900 dark:bg-red-950 dark:text-red-200",
|
|
},
|
|
error: {
|
|
icon: Ban,
|
|
classes:
|
|
"border-red-200 bg-red-50 text-red-900 dark:bg-red-950 dark:text-red-200",
|
|
},
|
|
idea: {
|
|
icon: Lightbulb,
|
|
classes:
|
|
"border-blue-200 bg-blue-50 text-blue-800 dark:bg-blue-950 dark:text-blue-200",
|
|
},
|
|
info: {
|
|
icon: Info,
|
|
classes:
|
|
"border-blue-200 bg-blue-50 text-blue-800 dark:bg-blue-950 dark:text-blue-200",
|
|
},
|
|
note: {
|
|
icon: FileText,
|
|
classes:
|
|
"border-blue-200 bg-blue-50 text-blue-800 dark:bg-blue-950 dark:text-blue-200",
|
|
},
|
|
success: {
|
|
icon: CircleCheckBig,
|
|
classes:
|
|
"border-green-200 bg-green-50 text-green-800 dark:bg-green-400/20 dark:text-green-300",
|
|
},
|
|
warning: {
|
|
icon: AlertTriangle,
|
|
classes:
|
|
"border-orange-200 bg-orange-50 text-orange-800 dark:bg-orange-400/20 dark:text-orange-300",
|
|
},
|
|
};
|
|
|
|
export function Callout({
|
|
children,
|
|
twClass,
|
|
type = "default",
|
|
...props
|
|
}: CalloutProps) {
|
|
const { icon: Icon, classes } = dataCallout[type];
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"mt-6 flex items-start space-x-3 rounded-lg border px-4 py-3 text-[15.6px] dark:border-none",
|
|
classes,
|
|
twClass,
|
|
)}
|
|
{...props}
|
|
>
|
|
<div className="mt-1 shrink-0">
|
|
<Icon className="size-5" />
|
|
</div>
|
|
<div className="[&>p]:my-0">{children}</div>
|
|
</div>
|
|
);
|
|
}
|