{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "link-preview",
  "type": "registry:component",
  "description": "An preview link component with spotlight effect.",
  "dependencies": [
    "motion/react",
    "qss"
  ],
  "registryDependencies": [
    "HoverCard",
    "HoverCardContent",
    "HoverCardTrigger"
  ],
  "files": [
    {
      "path": "src/app/components/animatedComponents/links/preview-links/LinkPreviewMotion.tsx",
      "content": "\"use client\";\r\n\r\nimport {\r\n  HoverCard,\r\n  HoverCardContent,\r\n  HoverCardTrigger,\r\n} from \"@/components/ui/hover-card\";\r\nimport { motion } from \"motion/react\";\r\nimport React, { useState } from \"react\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { encode } from \"qss\";\r\nimport Image from \"next/image\";\r\n\r\n\r\ntype LinkPreviewProps = {\r\n  children: React.ReactNode;\r\n  url: string;\r\n  className?: string;\r\n  width?: number;\r\n  height?: number;\r\n  isStatic?: any;\r\n  imageSrc?: string;\r\n};\r\n\r\nfunction LinkPreviewTag({\r\n  children,\r\n  url,\r\n  className,\r\n  width = 200,\r\n  height = 125,\r\n  isStatic=false,\r\n  imageSrc,\r\n}: LinkPreviewProps) {\r\n  const [open, setOpen] = useState(false);\r\n  const src = isStatic\r\n    ? imageSrc\r\n    : `https://api.microlink.io/?${encode({\r\n        url,\r\n        screenshot: true,\r\n        meta: false,\r\n        embed: \"screenshot.url\",\r\n        colorScheme: \"dark\",\r\n        \"viewport.isMobile\": true,\r\n        \"viewport.deviceScaleFactor\": 1,\r\n        \"viewport.width\": width * 3,\r\n        \"viewport.height\": height * 3,\r\n      })}`;\r\n  return (\r\n    <HoverCard openDelay={50} closeDelay={100} onOpenChange={setOpen}>\r\n      <HoverCardTrigger asChild>\r\n        <a href={url} className={cn(\"text-primary dark:text-primary hover:text-primary/80 dark:hover:text-primary/80\", className)}>\r\n          {children}\r\n        </a>\r\n      </HoverCardTrigger>\r\n\r\n      <HoverCardContent side=\"top\" align=\"center\" sideOffset={10} className=\"!p-0\" >\r\n        {open && (\r\n          <motion.div\r\n            initial={{ opacity: 0, y: 20, scale: 0.6 }}\r\n            animate={{ opacity: 1, y: 0, scale: 1 }}\r\n            exit={{ opacity: 0, y: 20, scale: 0.6 }}\r\n            transition={{ type: \"spring\", stiffness: 260, damping: 20 }}\r\n            className=\"rounded-md shadow-xl overflow-hidden\"\r\n          >\r\n            <a\r\n              href={url}\r\n              className=\"block p-0\"\r\n            >\r\n              <Image\r\n                src={src!}\r\n                width={width}\r\n                height={height}\r\n                alt=\"preview\"\r\n                style={{width:\"100%\"}}\r\n              />\r\n            </a>\r\n          </motion.div>\r\n        )}\r\n      </HoverCardContent>\r\n    </HoverCard>\r\n  );\r\n}\r\n\r\nexport default function LinkPreviewMotion(){\r\n  return (\r\n    <>\r\n<div>\r\n      <p className=\"text-dark dark:text-white text-xl mb-10\">\r\n        <LinkPreviewTag url=\"https://wrappixel.com\" className=\"font-bold\">\r\n          Wrappixel\r\n        </LinkPreviewTag>{\" \"} and\r\n        <LinkPreviewTag url=\"https://adminmart.com\" className=\"font-bold mx-2\">\r\n          Adminmart\r\n        </LinkPreviewTag>\r\n        are the market leaders in the dashboard or template industry.\r\n      </p>\r\n    </div>      \r\n    </>\r\n  )\r\n}\r\n",
      "type": "registry:component",
      "target": "components/animated/links/preview-links/LinkPreviewMotion.tsx"
    }
  ]
}