Hover-Card

npm install @volta/hover-card

import { Button } from '@volta/button';
import { Atomkraft, Rwe157 } from '@volta/iconography';
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from '@volta/hover-card';

<HoverCard>
  <HoverCardTrigger asChild>
    <Button variant="outline">@nextjs</Button>
  </HoverCardTrigger>
  <HoverCardContent className="w-80">
    <div className="flex justify-between space-x-4">
      <div className="w-10 h-10 text-primary">
        <Atomkraft></Atomkraft>
      </div>
      <div className="space-y-1">
        <h4 className="text-md font-semibold">Some title for Hover Card</h4>
        <p className="text-md">
          Try to rebase the DOM emoji, maybe it will bundle the private pattern!
        </p>
        <div className="flex items-center pt-2">
          <Rwe157 className="mr-2 h-4 w-4 opacity-70" />
          <span className="text-sm text-muted-foreground">
            Some information
          </span>
        </div>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>