Profile with Location Hover Card for Ark UI

<HoverCard>
  <HoverCardTrigger asChild>
    <a className="font-medium text-sm underline underline-offset-4" href="#">
      @haydenbleasel
    </a>
  </HoverCardTrigger>
  <HoverCardContent className="w-80">
    <div className="flex gap-4">
      <Avatar size="lg">
        <AvatarImage
          alt="@haydenbleasel"
          height={40}
          src="https://github.com/haydenbleasel.png"
          width={40}
        />
        <AvatarFallback>HB</AvatarFallback>
      </Avatar>
      <div className="flex flex-1 flex-col gap-2">
        <div>
          <h4 className="font-semibold text-sm">Hayden Bleasel</h4>
          <p className="text-muted-foreground text-sm">@haydenbleasel</p>
        </div>
        <p className="text-sm">
          Product designer and developer building tools for creators.
        </p>
        <div className="flex items-center gap-4 text-muted-foreground text-xs">
          <div className="flex items-center gap-1">
            <MapPinIcon aria-hidden="true" className="size-3" />
            San Francisco
          </div>
          <div className="flex items-center gap-1">
{/* The rest of the file is under Installation. */}