{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "link-preview",
  "type": "registry:block",
  "title": "Link preview",
  "description": "Link preview",
  "files": [
    {
      "path": "components/usages/linkpreviewusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { LinkPreview } from \"@/registry/open-source/link-preview\";\n\nexport default function LinkPreviewDemo() {\n\treturn (\n\t\t<div className=\"flex justify-center items-center h-160 flex-col px-4\">\n\t\t\t<span className=\"text-secondary dark:text-secondary text-xl md:text-3xl max-w-3xl mx-auto mb-10\">\n\t\t\t\t<LinkPreview\n\t\t\t\t\turl=\"https://tailwindcss.com\"\n\t\t\t\t\timageSrc=\"/itjustworks.jpg\"\n\t\t\t\t\tclassName=\"font-bold\"\n\t\t\t\t>\n\t\t\t\t\tTailwind CSS\n\t\t\t\t</LinkPreview>{\" \"}\n\t\t\t\tand{\" \"}\n\t\t\t\t<LinkPreview\n\t\t\t\t\turl=\"https://framer.com/motion\"\n\t\t\t\t\timageSrc=\"/itjustworks.jpg\"\n\t\t\t\t\tclassName=\"font-bold\"\n\t\t\t\t>\n\t\t\t\t\tFramer Motion\n\t\t\t\t</LinkPreview>{\" \"}\n\t\t\t\tare a great way to build modern websites.\n\t\t\t</span>\n\t\t\t<span className=\"text-secondary dark:text-secondary text-xl md:text-3xl max-w-3xl mx-auto\">\n\t\t\t\tVisit{\" \"}\n\t\t\t\t<LinkPreview\n\t\t\t\t\turl=\"https://ui.aceternity.com\"\n\t\t\t\t\timageSrc=\"/itjustworks.jpg\"\n\t\t\t\t\tclassName=\"font-bold bg-clip-text text-transparent bg-linear-to-br from-purple-500 to-pink-500\"\n\t\t\t\t>\n\t\t\t\t\tAceternity UI\n\t\t\t\t</LinkPreview>{\" \"}\n\t\t\t\tfor amazing Tailwind and Framer Motion components.\n\t\t\t</span>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/linkpreviewusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { LinkPreview } from \"@/registry/open-source/link-preview\";\n\nexport default function LinkPreviewDemo() {\n\treturn (\n\t\t<div className=\"flex justify-center items-center h-160 flex-col px-4\">\n\t\t\t<span className=\"text-secondary dark:text-secondary text-xl md:text-3xl max-w-3xl mx-auto mb-10\">\n\t\t\t\t<LinkPreview\n\t\t\t\t\turl=\"https://tailwindcss.com\"\n\t\t\t\t\timageSrc=\"/itjustworks.jpg\"\n\t\t\t\t\tclassName=\"font-bold\"\n\t\t\t\t>\n\t\t\t\t\tTailwind CSS\n\t\t\t\t</LinkPreview>{\" \"}\n\t\t\t\tand{\" \"}\n\t\t\t\t<LinkPreview\n\t\t\t\t\turl=\"https://framer.com/motion\"\n\t\t\t\t\timageSrc=\"/itjustworks.jpg\"\n\t\t\t\t\tclassName=\"font-bold\"\n\t\t\t\t>\n\t\t\t\t\tFramer Motion\n\t\t\t\t</LinkPreview>{\" \"}\n\t\t\t\tare a great way to build modern websites.\n\t\t\t</span>\n\t\t\t<span className=\"text-secondary dark:text-secondary text-xl md:text-3xl max-w-3xl mx-auto\">\n\t\t\t\tVisit{\" \"}\n\t\t\t\t<LinkPreview\n\t\t\t\t\turl=\"https://ui.aceternity.com\"\n\t\t\t\t\timageSrc=\"/itjustworks.jpg\"\n\t\t\t\t\tclassName=\"font-bold bg-clip-text text-transparent bg-linear-to-br from-purple-500 to-pink-500\"\n\t\t\t\t>\n\t\t\t\t\tAceternity UI\n\t\t\t\t</LinkPreview>{\" \"}\n\t\t\t\tfor amazing Tailwind and Framer Motion components.\n\t\t\t</span>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/link-preview.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport Image from \"next/image\";\nimport Link from \"next/link\";\n\nimport { cn } from \"@/registry/utilities/cn\";\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\";\nimport {\n\tAnimatePresence,\n\tmotion,\n\tuseMotionValue,\n\tuseSpring,\n} from \"motion/react\";\n\n// https://ui.aceternity.com/components/link-preview\n\ntype LinkPreviewProps = {\n\tchildren: React.ReactNode;\n\turl: string;\n\tclassName?: string;\n\twidth?: number;\n\theight?: number;\n\tquality?: number;\n\tlayout?: string;\n} & (\n\t| { isStatic: true; imageSrc: string }\n\t| { isStatic?: false; imageSrc?: never }\n);\n\nexport const LinkPreview = ({\n\tchildren,\n\turl,\n\tclassName,\n\twidth = 200,\n\theight = 125,\n\tquality = 50,\n\tlayout = \"fixed\",\n\timageSrc = \"\",\n}: LinkPreviewProps) => {\n\tconst [isOpen, setOpen] = React.useState(false);\n\n\tconst [isMounted, setIsMounted] = React.useState(false);\n\n\tReact.useEffect(() => {\n\t\tsetIsMounted(true);\n\t}, []);\n\n\tconst springConfig = { stiffness: 100, damping: 15 };\n\tconst x = useMotionValue(0);\n\n\tconst translateX = useSpring(x, springConfig);\n\n\tconst handleMouseMove = (event: any) => {\n\t\tconst targetRect = event.target.getBoundingClientRect();\n\t\tconst eventOffsetX = event.clientX - targetRect.left;\n\t\tconst offsetFromCenter = (eventOffsetX - targetRect.width / 2) / 2; // Reduce the effect to make it subtle\n\t\tx.set(offsetFromCenter);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t{isMounted ? (\n\t\t\t\t<div className=\"hidden\">\n\t\t\t\t\t<Image\n\t\t\t\t\t\tsrc={imageSrc || \"\"}\n\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\theight={height}\n\t\t\t\t\t\tquality={quality}\n\t\t\t\t\t\tlayout={layout}\n\t\t\t\t\t\tpriority={true}\n\t\t\t\t\t\talt=\"hidden image\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) : null}\n\n\t\t\t<HoverCardPrimitive.Root\n\t\t\t\topenDelay={50}\n\t\t\t\tcloseDelay={100}\n\t\t\t\tonOpenChange={(open) => {\n\t\t\t\t\tsetOpen(open);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<HoverCardPrimitive.Trigger\n\t\t\t\t\tonMouseMove={handleMouseMove}\n\t\t\t\t\tclassName={cn(\"text-foreground dark:text-foreground\", className)}\n\t\t\t\t\thref={url}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</HoverCardPrimitive.Trigger>\n\n\t\t\t\t<HoverCardPrimitive.Content\n\t\t\t\t\tclassName=\"origin-(--radix-hover-card-content-transform-origin)\"\n\t\t\t\t\tside=\"top\"\n\t\t\t\t\talign=\"center\"\n\t\t\t\t\tsideOffset={10}\n\t\t\t\t>\n\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t{isOpen && (\n\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\tinitial={{ opacity: 0, y: 20, scale: 0.6 }}\n\t\t\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\t\t\ty: 0,\n\t\t\t\t\t\t\t\t\tscale: 1,\n\t\t\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\t\t\ttype: \"spring\",\n\t\t\t\t\t\t\t\t\t\tstiffness: 260,\n\t\t\t\t\t\t\t\t\t\tdamping: 20,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\texit={{ opacity: 0, y: 20, scale: 0.6 }}\n\t\t\t\t\t\t\t\tclassName=\"shadow-xl rounded-xl\"\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tx: translateX,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\t\thref={url}\n\t\t\t\t\t\t\t\t\tclassName=\"block p-1 bg-background border-2 border-transparent shadow-sm rounded-xl hover:border-neutral-200 dark:hover:border-neutral-800\"\n\t\t\t\t\t\t\t\t\tstyle={{ fontSize: 0 }}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\t\tsrc={imageSrc || \"\"}\n\t\t\t\t\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\t\t\t\t\theight={height}\n\t\t\t\t\t\t\t\t\t\tquality={quality}\n\t\t\t\t\t\t\t\t\t\tlayout={layout}\n\t\t\t\t\t\t\t\t\t\tpriority={true}\n\t\t\t\t\t\t\t\t\t\tclassName=\"rounded-lg\"\n\t\t\t\t\t\t\t\t\t\talt=\"preview image\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</AnimatePresence>\n\t\t\t\t</HoverCardPrimitive.Content>\n\t\t\t</HoverCardPrimitive.Root>\n\t\t</>\n\t);\n};\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}