import * as React from "react";

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

export interface MentionBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
  username: string;
  avatarUrl?: string;
  hoverCard?: {
    name?: string;
    bio?: string;
  };
  href?: string;
}

const getInitials = (str: string) => {
  return str.slice(0, 2).toUpperCase();
};

export function MentionBadge({
  username,
  avatarUrl,
  hoverCard,
  href,
  className,
  ...props
}: MentionBadgeProps) {
  const Tag = href ? "a" : "span";
  const linkProps = href ? { href } : {};

  return (
    <span className={cn("group relative inline-flex", className)} {...props}>
      <Tag
        {...linkProps}
        className={cn(
          "inline-flex items-center gap-1.5 rounded-full border border-border bg-muted px-2 py-0.5 text-xs font-semibold text-primary transition",
          href && "hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
        )}
      >
        <span className="h-4 w-4 overflow-hidden rounded-full border border-border bg-background">
          {avatarUrl ? (
            <img
              src={avatarUrl}
              alt={username}
              className="h-full w-full object-cover"
            />
          ) : (
            <span className="flex h-full w-full items-center justify-center text-[8px] font-semibold text-muted-foreground">
              {getInitials(username)}
            </span>
          )}
        </span>
        @{username}
      </Tag>

      {hoverCard && (
        <span
          role="tooltip"
          className={cn(
            "pointer-events-none absolute bottom-full left-1/2 z-10 mb-2 w-48 -translate-x-1/2 rounded-lg border border-border bg-card p-3 opacity-0 shadow-lg transition",
            "group-hover:pointer-events-auto group-hover:opacity-100"
          )}
        >
          <span className="flex items-center gap-2">
            <span className="h-8 w-8 overflow-hidden rounded-full border border-border bg-muted">
              {avatarUrl ? (
                <img
                  src={avatarUrl}
                  alt={username}
                  className="h-full w-full object-cover"
                />
              ) : (
                <span className="flex h-full w-full items-center justify-center text-xs font-semibold text-muted-foreground">
                  {getInitials(username)}
                </span>
              )}
            </span>
            <span className="min-w-0 flex-1">
              <span className="block truncate text-sm font-semibold text-foreground">
                {hoverCard.name ?? `@${username}`}
              </span>
              <span className="block text-xs text-muted-foreground">@{username}</span>
            </span>
          </span>
          {hoverCard.bio && (
            <span className="mt-2 block text-xs text-muted-foreground">
              {hoverCard.bio}
            </span>
          )}
        </span>
      )}
    </span>
  );
}
Mention Badge

Dependencies

Files

Installation
