Hover Card

import {
  HoverCard,
  HoverCardTrigger,
  HoverCardContent,
} from "@araf-ds/core"

export default function Example() {
  return (
    <HoverCard>
      <HoverCardTrigger asChild>
        <a href="#" className="text-primary underline">@badrinteractive</a>
      </HoverCardTrigger>
      <HoverCardContent className="w-64">
        <div className="flex gap-3">
          <Avatar src="/avatar.jpg" fallback="B" />
          <div>
            <h4 className="text-sm font-semibold">Badr Interactive</h4>
            <p className="text-xs text-muted-foreground">@badrinteractive</p>
            <p className="text-sm mt-1">
              Designing A'raf Design System. Jakarta 🇮🇩
            </p>
            <div className="flex gap-4 text-xs text-muted-foreground mt-2">
              <span><strong>128</strong> following</span>
              <span><strong>4.2k</strong> followers</span>
            </div>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  )
}

<HoverCard>
  <HoverCardTrigger asChild>
    <Button variant="link">@badrinteractive</Button>
  </HoverCardTrigger>
  <HoverCardContent side="bottom" align="start" className="w-64">
    <div className="flex gap-3">
      <Avatar src={user.avatar} fallback={user.initials} size="md" />
      <div className="space-y-1">
        <h4 className="text-sm font-semibold">{user.name}</h4>
        <p className="text-xs text-muted-foreground">@{user.handle}</p>
        <p className="text-sm">{user.bio}</p>
        <div className="flex gap-3 text-xs text-muted-foreground pt-1">
          <span><strong>{user.following}</strong> following</span>
          <span><strong>{user.followers}</strong> followers</span>
        </div>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>

<HoverCard openDelay={300}>
  <HoverCardTrigger asChild>
    <a href="https://mintlify.com" target="_blank" className="underline">
      Mintlify docs
    </a>
  </HoverCardTrigger>
  <HoverCardContent className="w-72">
    <div className="space-y-2">
      <div className="aspect-video bg-muted rounded-md overflow-hidden">
        <img src="/og-preview.png" alt="Mintlify" className="w-full h-full object-cover" />
      </div>
      <h4 className="text-sm font-semibold">Mintlify – Beautiful Docs</h4>
      <p className="text-xs text-muted-foreground">
        The documentation platform built for developers.
      </p>
      <p className="text-xs text-muted-foreground">mintlify.com</p>
    </div>
  </HoverCardContent>
</HoverCard>