Preview Card in five frameworks

import { PreviewCard } from '@hamur/react/preview-card'

export default function PreviewCardExample() {
  return (
    <PreviewCard.Root>
      <p className="preview-text">
        The principles of good{' '}
        <PreviewCard.Trigger className="preview-link" href="#typography">
          typography
        </PreviewCard.Trigger>{' '}
        hold up on screens too.
      </p>
      <PreviewCard.Portal>
        <PreviewCard.Positioner sideOffset={8}>
          <PreviewCard.Popup className="popover preview-card">
            <PreviewCard.Arrow className="arrow" />
            <p className="popover-title">Typography</p>
            <p className="muted">
              The craft of arranging type so that written words are legible and pleasant to read.
            </p>
          </PreviewCard.Popup>
        </PreviewCard.Positioner>
      </PreviewCard.Portal>
    </PreviewCard.Root>
  )
}