Author Tooltip

1"use client";
2 
3import type * as React from "react";
4import { FaGithub, FaLinkedin, FaTwitter } from "react-icons/fa";
5import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
6import {
7	Tooltip,
8	TooltipContent,
9	TooltipTrigger,
10} from "@/components/ui/tooltip";
11import { cn } from "@/lib/utils";
12 
13export interface Author {
14	name: string;
15	avatar: string;
16	role: string;
17	linkedin?: string;
18	twitter?: string;
19	github?: string;
20}
21 
22interface AuthorTooltipProps {
23	author: Author;
24	avatarSize?: "sm" | "md" | "lg" | "xl";
25	avatarClassName?: string;
26	/** Custom trigger element - if not provided, defaults to avatar */
27	trigger?: React.ReactNode;
28	/** Additional content to render in the tooltip */
29	children?: React.ReactNode;
30}
31 
32const sizeMap = {
33	sm: "h-8 w-8",
34	md: "h-10 w-10",
35	lg: "h-12 w-12",
36	xl: "h-16 w-16",
37};
38 
39export function AuthorTooltip({
40	author,
41	avatarSize = "sm",
42	avatarClassName = "cursor-help border-2 border-border",
43	trigger,
44	children,
45}: AuthorTooltipProps) {
46	const getInitials = (name: string) => {
47		return name
48			.split(" ")
49			.map((n) => n[0])
50			.join("")
51			.toUpperCase()
52			.slice(0, 2);
53	};
54 
55	const defaultTrigger = (
56		<Avatar className={cn(sizeMap[avatarSize], avatarClassName)}>
57			<AvatarImage src={author.avatar} alt={author.name} />
58			<AvatarFallback>{getInitials(author.name)}</AvatarFallback>
59		</Avatar>
60	);
61 
62	return (
63		<Tooltip>
64			<TooltipTrigger asChild>
65				{trigger ? <div>{trigger}</div> : defaultTrigger}
66			</TooltipTrigger>
67			<TooltipContent className="p-0 rounded-xl">
68				<div className="flex flex-col gap-2 p-3">
69					<div className="flex flex-row items-center gap-3">
70						<Avatar className="h-10 w-10">
71							<AvatarImage src={author.avatar} alt={author.name} />
72							<AvatarFallback>{getInitials(author.name)}</AvatarFallback>
73						</Avatar>
74						<div className="flex flex-col">
75							<span className="text-sm font-medium">{author.name}</span>
76							<span className="text-xs text-muted-foreground">
77								{author.role}
78							</span>
79						</div>
80						{(author.linkedin || author.twitter || author.github) && (
81							<div className="ml-4 flex gap-2.5">
82								{author.linkedin && (
83									<a
84										href={author.linkedin}
85										target="_blank"
86										rel="noopener noreferrer"
87										className="text-background hover:text-muted-foreground transition-colors"
88									>
89										<FaLinkedin className="h-5 w-5" />
90									</a>
91								)}
92								{author.twitter && (
93									<a
94// … truncated