Callout

npx shadcn@latest add https://blocks.aiskillhub.info/api/registry/callout

import { Info, AlertTriangle, CheckCircle2, Lightbulb } from "lucide-react";

const variants = {
  info: { icon: Info, ring: "border-sky-500/30 bg-sky-500/10 text-sky-700 dark:text-sky-300" },
  warning: { icon: AlertTriangle, ring: "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300" },
  success: { icon: CheckCircle2, ring: "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300" },
  tip: { icon: Lightbulb, ring: "border-violet-500/30 bg-violet-500/10 text-violet-700 dark:text-violet-300" },
} as const;

export function Callout({ variant = "info", title, children }: {
  variant?: keyof typeof variants; title?: string; children: React.ReactNode;
}) {
  const { icon: Icon, ring } = variants[variant];
  return (
    <div className={`flex gap-3 rounded-xl border p-4 ${ring}`}>
      <Icon className="mt-0.5 h-5 w-5 shrink-0" />
      <div className="space-y-1 text-sm">
        {title && <p className="font-semibold">{title}</p>}
        <div className="opacity-90">{children}</div>
      </div>
    </div>
  );
}