Author Tooltip

import { AuthorTooltip, Author } from "@/components/ui/author-tooltip";

const author: Author = {
  name: "Jane Smith",
  avatar: "https://avatar.com/jane.jpg",
  role: "Software Engineer",
  github: "https://github.com/janesmith",
  twitter: "https://twitter.com/janesmith",
  linkedin: "https://linkedin.com/in/janesmith"
};

export default function Example() {
  return <AuthorTooltip author={author} />;
}

<AuthorTooltip author={author} avatarSize="sm" />  {/* 32px - Default */}
<AuthorTooltip author={author} avatarSize="md" />  {/* 40px */}
<AuthorTooltip author={author} avatarSize="lg" />  {/* 48px */}
<AuthorTooltip author={author} avatarSize="xl" />  {/* 64px */}

const author: Author = {
  name: "John Doe",
  avatar: "/avatar.jpg",
  role: "Designer",
  github: "https://github.com/johndoe",      // GitHub icon
  twitter: "https://twitter.com/johndoe",    // Twitter icon
  linkedin: "https://linkedin.com/in/johndoe" // LinkedIn icon
};

<AuthorTooltip author={author} />

<AuthorTooltip 
  author={author}
  trigger={
    <button className="text-blue-500 hover:underline">
      View Author
    </button>
  }
/>

<AuthorTooltip author={author}>
  <div className="mt-2 pt-2 border-t">
    <p className="text-xs text-muted-foreground">
      Joined March 2024 · 127 contributions
    </p>
  </div>
</AuthorTooltip>

<AuthorTooltip 
  author={author}
  avatarClassName="border-4 border-blue-500 shadow-lg"
/>

// If avatar URL fails, shows "JS" for "Jane Smith"
const author = {
  name: "Jane Smith",
  avatar: "https://broken-link.jpg",
  role: "Developer"
};

interface Author {
  name: string;       // Display name
  avatar: string;     // Avatar image URL
  role: string;       // Job title or role
  linkedin?: string;  // LinkedIn profile URL
  twitter?: string;   // Twitter/X profile URL
  github?: string;    // GitHub profile URL
}

<article>
  <div className="flex items-center gap-2">
    <AuthorTooltip author={author} />
    <div>
      <p className="font-medium">{author.name}</p>
      <p className="text-sm text-muted-foreground">March 15, 2024</p>
    </div>
  </div>
  <div className="prose">
    {/* Article content */}
  </div>
</article>

<div className="flex gap-3">
  <AuthorTooltip author={commenter} avatarSize="md" />
  <div className="flex-1">
    <div className="flex items-center gap-2">
      <span className="font-semibold">{commenter.name}</span>
      <span className="text-xs text-muted-foreground">2 hours ago</span>
    </div>
    <p className="mt-1">{comment.text}</p>
  </div>
</div>

<div className="grid grid-cols-4 gap-6">
  {team.map((member) => (
    <div key={member.id} className="text-center">
      <AuthorTooltip author={member} avatarSize="xl" />
      <p className="mt-2 font-medium">{member.name}</p>
      <p className="text-sm text-muted-foreground">{member.role}</p>
    </div>
  ))}
</div>

<p>
  Great work by{" "}
  <AuthorTooltip 
    author={author}
    trigger={
      <span className="font-semibold text-blue-600 cursor-help">
        @{author.name}
      </span>
    }
  />
  {" "}on this feature!
</p>