Annotation

import { Annotation } from "@/components/ui/annotation";

export default function Example() {
  return <Annotation />;
}

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const Annotation = forwardRef(({ className, label, type = "info", children, ...props }, ref) => {
  const colors = {
    info: "border-blue-300 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-300",
    warning: "border-yellow-300 bg-yellow-50 text-yellow-700 dark:border-yellow-800 dark:bg-yellow-950 dark:text-yellow-300",
    error: "border-red-300 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-950 dark:text-red-300",
    success: "border-green-300 bg-green-50 text-green-700 dark:border-green-800 dark:bg-green-950 dark:text-green-300",
  };
  return (
    <div ref={ref} className={cn("relative rounded-lg border p-3 text-sm", colors[type], className)} {...props}>
      {label && <span className="absolute -top-2.5 left-3 rounded bg-inherit px-1.5 text-xs font-medium">{label}</span>}
      {children}
    </div>
  );
});
Annotation.displayName = "Annotation";

export { Annotation };