Preview Card

import { PreviewCard } from "@craftdotui/baseui/components/preview-card";

<PreviewCard>
  <PreviewCardTrigger>
    <a href="#">@username</a>
  </PreviewCardTrigger>
  
  <PreviewCardPortal>
    <PreviewCardPositioner>
      <PreviewCardPopup>
        <div className="space-y-2">
          <h4 className="font-semibold">User Name</h4>
          <p className="text-sm">Bio information goes here.</p>
        </div>
      </PreviewCardPopup>
    </PreviewCardPositioner>
  </PreviewCardPortal>
</PreviewCard>

<PreviewCard>
  <PreviewCardTrigger>
    <Avatar>
      <AvatarImage src="/avatar.jpg" />
      <AvatarFallback>JD</AvatarFallback>
    </Avatar>
  </PreviewCardTrigger>
  
  <PreviewCardPortal>
    <PreviewCardPositioner>
      <PreviewCardPopup className="w-80">
        <div className="flex gap-4">
          <Avatar>
            <AvatarImage src="/avatar.jpg" />
            <AvatarFallback>JD</AvatarFallback>
          </Avatar>
          <div>
            <h4 className="font-semibold">John Doe</h4>
            <p className="text-sm text-muted-foreground">@johndoe</p>
            <p className="mt-2 text-sm">Software developer and designer.</p>
          </div>
        </div>
      </PreviewCardPopup>
    </PreviewCardPositioner>
  </PreviewCardPortal>
</PreviewCard>

<PreviewCard>
  <PreviewCardTrigger>
    <a href="https://example.com" className="underline">
      example.com
    </a>
  </PreviewCardTrigger>
  
  <PreviewCardPortal>
    <PreviewCardPositioner>
      <PreviewCardPopup>
        <div className="space-y-2">
          <h4 className="font-semibold">Example Website</h4>
          <p className="text-sm text-muted-foreground">
            A description of the linked content.
          </p>
        </div>
      </PreviewCardPopup>
    </PreviewCardPositioner>
  </PreviewCardPortal>
</PreviewCard>