Function SocialPreview

packages/devtools/src/tabs/seo-tab/social-previews.tsx:93–141

(props: {
  meta: SocialMeta
  color: string
  network: string
})

}

function SocialPreview(props: {
  meta: SocialMeta
  color: string
  network: string
}) {
  const styles = createStyles()

  return (
    <div class={styles().seoPreviewCard}>
      <div
        class={styles().seoPreviewHeader}
        data-testid="social-preview-heading"
      >
        <span
          aria-hidden="true"
          class={styles().seoPreviewNetworkDot}
          style={{ background: props.color }}
        />
        {props.network} Preview
      </div>
      {props.meta.image ? (
        <img
          src={props.meta.image}
          alt="Preview"
          class={styles().seoPreviewImage}
        />
      ) : (
        <div
          class={`${styles().seoPreviewImage} ${styles().seoPreviewImagePlaceholder}`}
        >
          No image
        </div>
      )}
      <div class={styles().seoPreviewTitle} data-testid="social-preview-title">
        {props.meta.title || 'No Title'}
      </div>
      <div class={styles().seoPreviewDesc}>
        {props.meta.description || 'No Description'}
      </div>
      <div class={styles().seoPreviewUrl}>
        {props.meta.url || window.location.href}
      </div>
    </div>
  )
}

export function SocialPreviewsSection() {
  const [reports, setReports] = createSignal<Array<SocialReport>>(analyzeHead())
  const styles = createStyles()

  function analyzeHead(): Array<SocialReport> {
    const metaTags = Array.from(document.head.querySelectorAll('meta'))