Citation Chip

import { CitationChip } from "@/components/ui/citation-chip";

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

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

const CitationChip = forwardRef(({ className, index, title, url, ...props }, ref) => (
  <a ref={ref} href={url || "#"} target="_blank" rel="noopener noreferrer"
    className={cn("inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs transition-colors hover:bg-accent", className)}
    {...props}
  >
    {index != null && <span className="flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-primary-foreground">{index}</span>}
    <span className="max-w-[150px] truncate">{title || url}</span>
  </a>
));
CitationChip.displayName = "CitationChip";

export { CitationChip };