{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "primitives-radix-preview-link-card",
  "title": "Radix Preview Link Card",
  "description": "Displays a preview image of a link when hovered.",
  "dependencies": [
    "radix-ui"
  ],
  "registryDependencies": [
    "@animate-ui/primitives-radix-hover-card",
    "@animate-ui/lib-get-strict-context"
  ],
  "files": [
    {
      "path": "registry/primitives/radix/preview-link-card/index.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\n\nimport {\n  HoverCard as HoverCardPrimitive,\n  HoverCardTrigger as HoverCardTriggerPrimitive,\n  HoverCardContent as HoverCardContentPrimitive,\n  HoverCardPortal as HoverCardPortalPrimitive,\n  HoverCardArrow as HoverCardArrowPrimitive,\n  type HoverCardProps as HoverCardPropsPrimitive,\n  type HoverCardTriggerProps as HoverCardTriggerPropsPrimitive,\n  type HoverCardContentProps as HoverCardContentPropsPrimitive,\n  type HoverCardPortalProps as HoverCardPortalPropsPrimitive,\n  type HoverCardArrowProps as HoverCardArrowPropsPrimitive,\n} from '@/components/animate-ui/primitives/radix/hover-card';\nimport { getStrictContext } from '@/lib/get-strict-context';\n\ntype PreviewLinkCardContextType = {\n  href: string;\n  src?: string;\n  width?: number;\n  height?: number;\n};\n\nconst [PreviewLinkCardProvider, usePreviewLinkCard] =\n  getStrictContext<PreviewLinkCardContextType>('PreviewLinkCardContext');\n\ntype PreviewLinkCardProps = HoverCardPropsPrimitive & {\n  href: string;\n  src?: string;\n  width?: number;\n  height?: number;\n  deviceScaleFactor?: number;\n  colorScheme?: 'light' | 'dark';\n};\n\nfunction PreviewLinkCard({\n  href,\n  src,\n  width = 240,\n  height = 135,\n  deviceScaleFactor = 1,\n  colorScheme = 'light',\n  ...props\n}: PreviewLinkCardProps) {\n  const imageSrc =\n    src ??\n    `https://api.microlink.io/?${buildQueryString({\n      url: href,\n      screenshot: true,\n      meta: false,\n      embed: 'screenshot.url',\n      colorScheme,\n      'viewport.isMobile': true,\n      'viewport.deviceScaleFactor': deviceScaleFactor,\n      'viewport.width': width * 3,\n      'viewport.height': height * 3,\n    })}`;\n\n  React.useEffect(() => {\n    const link = document.createElement('link');\n    link.rel = 'preload';\n    link.as = 'image';\n    link.href = imageSrc;\n    document.head.appendChild(link);\n    return () => {\n      document.head.removeChild(link);\n    };\n  }, [imageSrc]);\n\n  return (\n    <PreviewLinkCardProvider value={{ href, src: imageSrc, width, height }}>\n      <HoverCardPrimitive data-slot=\"preview-link-card\" {...props} />\n    </PreviewLinkCardProvider>\n  );\n}\n\ntype PreviewLinkCardTriggerProps = HoverCardTriggerPropsPrimitive &\n  React.ComponentProps<'a'>;\n\nfunction PreviewLinkCardTrigger({\n  asChild,\n  children,\n  href: hrefProp,\n  ...props\n}: PreviewLinkCardTriggerProps) {\n  const { href } = usePreviewLinkCard();\n\n  return (\n    <HoverCardTriggerPrimitive\n      data-slot=\"preview-link-card-trigger\"\n      asChild\n      {...props}\n    >\n      {asChild ? children : <a href={hrefProp ?? href}>{children}</a>}\n    </HoverCardTriggerPrimitive>\n  );\n}\n\ntype PreviewLinkCardPortalProps = HoverCardPortalPropsPrimitive;\n\nfunction PreviewLinkCardPortal(props: PreviewLinkCardPortalProps) {\n  return (\n    <HoverCardPortalPrimitive data-slot=\"preview-link-card-portal\" {...props} />\n  );\n}\n\nfunction buildQueryString(\n  params: Record<string, string | number | boolean | undefined | null>,\n) {\n  const sp = new URLSearchParams();\n  for (const [k, v] of Object.entries(params)) {\n    if (v === undefined || v === null) continue;\n    sp.append(k, String(v));\n  }\n  return sp.toString();\n}\n\ntype PreviewLinkCardContentProps = HoverCardContentPropsPrimitive &\n  React.ComponentProps<'a'>;\n\nfunction PreviewLinkCardContent({\n  side = 'top',\n  sideOffset = 10,\n  align = 'center',\n  alignOffset,\n  avoidCollisions,\n  collisionBoundary,\n  collisionPadding,\n  arrowPadding,\n  sticky,\n  hideWhenDetached,\n  transition = { type: 'spring', stiffness: 300, damping: 25 },\n  asChild,\n  children,\n  href: hrefProp,\n  style,\n  ...props\n}: PreviewLinkCardContentProps) {\n  const { href } = usePreviewLinkCard();\n\n  return (\n    <HoverCardContentPrimitive\n      data-slot=\"preview-link-card-content\"\n      side={side}\n      sideOffset={sideOffset}\n      align={align}\n      alignOffset={alignOffset}\n      avoidCollisions={avoidCollisions}\n      collisionBoundary={collisionBoundary}\n      collisionPadding={collisionPadding}\n      arrowPadding={arrowPadding}\n      sticky={sticky}\n      hideWhenDetached={hideWhenDetached}\n      transition={transition}\n      asChild={asChild}\n      {...(asChild ? { style, ...props } : {})}\n    >\n      {asChild ? (\n        children\n      ) : (\n        <a\n          style={{\n            display: 'block',\n            ...style,\n          }}\n          href={hrefProp ?? href}\n          {...props}\n        >\n          {children}\n        </a>\n      )}\n    </HoverCardContentPrimitive>\n  );\n}\n\ntype PreviewLinkCardImageProps = Omit<\n  React.ComponentProps<'img'>,\n  'src' | 'width' | 'height'\n>;\n\nfunction PreviewLinkCardImage({\n  alt = 'preview image',\n  ...props\n}: PreviewLinkCardImageProps) {\n  const { src, width, height } = usePreviewLinkCard();\n\n  return <img src={src} width={width} height={height} alt={alt} {...props} />;\n}\n\ntype PreviewLinkCardArrowProps = HoverCardArrowPropsPrimitive;\n\nfunction PreviewLinkCardArrow(props: PreviewLinkCardArrowProps) {\n  return (\n    <HoverCardArrowPrimitive data-slot=\"preview-link-card-arrow\" {...props} />\n  );\n}\n\nexport {\n  PreviewLinkCard,\n  PreviewLinkCardTrigger,\n  PreviewLinkCardPortal,\n  PreviewLinkCardContent,\n  PreviewLinkCardImage,\n  PreviewLinkCardArrow,\n  usePreviewLinkCard,\n  type PreviewLinkCardProps,\n  type PreviewLinkCardTriggerProps,\n  type PreviewLinkCardPortalProps,\n  type PreviewLinkCardContentProps,\n  type PreviewLinkCardImageProps,\n  type PreviewLinkCardArrowProps,\n  type PreviewLinkCardContextType,\n};\n",
      "type": "registry:ui",
      "target": "components/animate-ui/primitives/radix/preview-link-card.tsx"
    }
  ],
  "type": "registry:ui"
}