HoverCard

import { HoverCard, HoverCardTrigger, HoverCardContent } from '@caroainc/ui-components/client'

<HoverCard>
  <HoverCardTrigger asChild>
    <a href="#">@username</a>
  </HoverCardTrigger>
  <HoverCardContent>
    <div className="flex space-x-4">
      <Avatar>
        <AvatarImage src="/avatar.png" />
        <AvatarFallback>UN</AvatarFallback>
      </Avatar>
      <div>
        <h4 className="font-semibold">ユーザー名</h4>
        <p className="text-sm text-muted-foreground">
          プロフィールの説明文
        </p>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>

<HoverCard>
  <HoverCardTrigger asChild>
    <Button variant="link">
      <Icon name="Link" />
      詳細を見る
    </Button>
  </HoverCardTrigger>
  <HoverCardContent className="w-80">
    <div className="space-y-2">
      <h4 className="font-semibold">リンク先のタイトル</h4>
      <p className="text-sm text-muted-foreground">
        リンク先の説明文やプレビュー内容
      </p>
    </div>
  </HoverCardContent>
</HoverCard>