کارت هاور (Hover Card)

import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from '@parto/ui';
import { Avatar, AvatarFallback, AvatarImage } from '@parto/ui';

export default function MyComponent() {
  return (
    <HoverCard>
      <HoverCardTrigger>@کاربر</HoverCardTrigger>
      <HoverCardContent>
        <div className="flex gap-4">
          <Avatar>
            <AvatarImage src="/avatar.jpg" />
            <AvatarFallback>ک</AvatarFallback>
          </Avatar>
          <div>
            <h4 className="font-semibold">نام کاربر</h4>
            <p className="text-sm">توضیحات کاربر</p>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  );
}