"use client"; import * as React from "react"; import { HoverCard as HoverPrimitive } from "radix-ui"; import { motion } from "motion/react"; import { cn } from "@kineticui/core"; import { MapPinIcon } from "@kineticui/icons"; export type Profile = { name: string; handle: string; bio?: string; avatar?: string; color?: string; cover?: string; location?: string; stats?: { label: string; value: number }[]; /** Mutual connections shown as small avatars. */ mutuals?: { name: string; color?: string }[]; verified?: boolean; followsYou?: boolean; }; export type ProfileHoverCardProps = { profile: Profile; children: React.ReactElement; following?: boolean; onFollowChange?: (following: boolean) => void; }; const initials = (n: string) => n.split(/\s+/).map((p) => p[0]).slice(0, 2).join("").toUpperCase(); const compact = (n: number) => new Intl.NumberFormat("en", { notation: "compact" }).format(n); /** Hover a name to preview the profile: cover, avatar, bio, stats, mutuals and a Follow button that updates counts. */ export function ProfileHoverCard({ profile: p, children, following: controlled, onFollowChange }: ProfileHoverCardProps) { const [inner, setInner] = React.useState(false); const following = controlled ?? inner; const toggle = () => { const next = !following; if (controlled === undefined) setInner(next); onFollowChange?.(next); }; const stats = (p.stats ?? []).map((s) => (s.label.toLowerCase() === "followers" ? { ...s, value: s.value + (following ? 1 : 0) } : s)); return ( {children}

{p.avatar ?

: initials(p.name)} {following ? ( <> Following Unfollow ) : p.followsYou ? "Follow back" : "Follow"}

{p.name} {p.verified ? ( ) : null}

@{p.handle} {p.followsYou ? Follows you : null}

{p.bio ?

{p.bio}

: null} {p.location ? {p.location} : null} {stats.length ? (

{stats.map((s) => ( {compact(s.value)}{" "} {s.label} ))}

) : null} {p.mutuals?.length ? (

{p.mutuals.slice(0, 3).map((m) => ( {initials(m.name)} ))} Followed by {p.mutuals[0]!.name.split(" ")[0]}{p.mutuals.length > 1 ? ` and ${p.mutuals.length - 1} other${p.mutuals.length > 2 ? "s" : ""} you know` : ""}

) : null}

); }

Profile Hover Card

Installation

Exports