} >

{blogContent.title}

{blogContent.description}

{blogContent.date}

); } const blogContent = { slug: "amazing-tailwindcss-grid-layouts", author: "Manu Arora", date: "28th March, 2023", title: "Amazing Tailwindcss Grid Layout Examples", description: "Grids are cool, but Tailwindcss grids are cooler. In this article, we will learn how to create amazing Grid layouts with Tailwindcs grid and React.", image: "/demo/thumbnail.png", authorAvatar: "/manu.png", }; const TitleComponent = ({ title, avatar, }: { title: string; avatar: string; }) => (

{title}

); `,__rawStringJsx__:`import { FollowerPointerCard } from "../ui/following-pointer"; export function FollowingPointerDemo() { return (

{blogContent.title}

{blogContent.description}

{blogContent.date}

{title}

); `,__src__:"/src/registry/default/example/following-pointer-demo.tsx",children:(0,i.jsxs)(e.code,{"data-language":"tsx","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:[(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" FollowerPointerCard"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "../ui/following-pointer"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"export"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" function"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" FollowingPointerDemo"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"()"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div "}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"mx-auto w-80"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"FollowerPointerCard"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" title"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"TitleComponent"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" title"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"blogContent"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"author"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" avatar"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"blogContent"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"authorAvatar"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" >"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"group relative h-full overflow-hidden rounded-2xl border border-zinc-100 bg-white transition duration-200 hover:shadow-xl"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"relative aspect-[16/10] w-full overflow-hidden rounded-tl-lg rounded-tr-lg bg-gray-100"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"img"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" src"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"blogContent"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"image"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" alt"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"thumbnail"'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"h-full transform object-cover transition duration-200 group-hover:scale-95 group-hover:rounded-2xl"'})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"p-4"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"h2"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"my-4 text-lg font-bold text-zinc-700"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"blogContent"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"title"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"h2"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"my-4 text-sm font-normal text-zinc-500"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"blogContent"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"description"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"mt-10 flex flex-row items-center justify-between"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"span"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"text-sm text-gray-500"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"{"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"blogContent"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"date"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:""})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"relative z-10 block rounded-xl bg-black px-6 py-2 text-xs font-bold text-white"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" Read More"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:"const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" blogContent"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" slug"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "amazing-tailwindcss-grid-layouts"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" author"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "Manu Arora"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" date"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "28th March, 2023"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" title"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "Amazing Tailwindcss Grid Layout Examples"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" description"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "Grids are cool, but Tailwindcss grids are cooler. In this article, we will learn how to create amazing Grid layouts with Tailwindcs grid and React."'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" image"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "/demo/thumbnail.png"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" authorAvatar"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "/manu.png"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"};"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:"const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" TitleComponent"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ({"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" title"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" avatar"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" title"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" string"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" avatar"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" string"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"})"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"flex items-center space-x-2"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"img"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" src"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"avatar"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" height"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"20"'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" width"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"20"'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" alt"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"thumbnail"'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"rounded-full border-2 border-white"'})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"p"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"{"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"title"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:""})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})})]})})})}),` `,(0,i.jsxs)(e.h2,{id:"installation",children:[(0,i.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,i.jsx)(e.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,i.jsxs)(t,{defaultValue:"manual",children:[(0,i.jsxs)(b,{children:[(0,i.jsx)(c,{value:"cli",children:"CLI"}),(0,i.jsx)(c,{value:"manual",children:"Manual"})]}),(0,i.jsx)(o,{value:"cli",children:(0,i.jsxs)(h,{children:[(0,i.jsx)(a,{children:"Run the following command"}),(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"bash","data-theme":"BeardedTheme Arc",__rawString__:`npx shadcn@latest add https://ui.aceternity.com/registry/following-pointer.json `,__npmCommand__:`npx shadcn@latest add https://ui.aceternity.com/registry/following-pointer.json `,__yarnCommand__:`npx shadcn@latest add https://ui.aceternity.com/registry/following-pointer.json `,__pnpmCommand__:`pnpm dlx shadcn@latest add https://ui.aceternity.com/registry/following-pointer.json `,__bunCommand__:`bun x --bun shadcn@latest add https://ui.aceternity.com/registry/following-pointer.json `,children:(0,i.jsx)(e.code,{"data-language":"bash","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"npx"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" shadcn@latest"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" add"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" https://ui.aceternity.com/registry/following-pointer.json"})]})})})})]})}),(0,i.jsx)(o,{value:"manual",children:(0,i.jsxs)(h,{children:[(0,i.jsx)(a,{children:"Install dependencies"}),(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"bash","data-theme":"BeardedTheme Arc",__rawString__:`npm i motion clsx tailwind-merge `,children:(0,i.jsx)(e.code,{"data-language":"bash","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"npm"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" i"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" motion"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" clsx"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" tailwind-merge"})]})})})}),(0,i.jsx)(a,{children:"Add util file"}),(0,i.jsxs)(e.figure,{"data-rehype-pretty-code-figure":"",children:[(0,i.jsx)(e.figcaption,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"BeardedTheme Arc",children:"lib/utils.ts"}),(0,i.jsx)(e.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"tsx","data-theme":"BeardedTheme Arc",__rawString__:`import { ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } `,__rawStringJsx__:`import { clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs) { return twMerge(clsx(inputs)); } `,children:(0,i.jsxs)(e.code,{"data-language":"tsx","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:[(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" ClassValue"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" clsx"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "clsx"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" twMerge"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "tailwind-merge"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"export"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" function"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" cn"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"(..."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:"inputs"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" ClassValue"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"[])"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" twMerge"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"clsx"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"inputs"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"));"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})})]})})]}),(0,i.jsx)(a,{children:"Copy the source code"}),(0,i.jsx)(e.p,{children:(0,i.jsx)(e.code,{children:"components/ui/following-pointer.tsx"})}),(0,i.jsx)(n,{name:"following-pointer",children:(0,i.jsx)(e.figure,{__src__:"/src/registry/default/ui/following-pointer.tsx",__style__:"default","data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"tsx","data-theme":"BeardedTheme Arc",__rawString__:`// Core component that receives mouse positions and renders pointer and content import React, { useEffect, useState } from "react"; import { motion, AnimatePresence, useMotionValue } from "motion/react"; import { cn } from "@/lib/utils"; export const FollowerPointerCard = ({ children, className, title, }: { children: React.ReactNode; className?: string; title?: string | React.ReactNode; }) => { const x = useMotionValue(0); const y = useMotionValue(0); const ref = React.useRef(null); const [rect, setRect] = useState(null); const [isInside, setIsInside] = useState(false); // Add this line useEffect(() => { if (ref.current) { setRect(ref.current.getBoundingClientRect()); } }, []); const handleMouseMove = (e: React.MouseEvent) => { if (rect) { const scrollX = window.scrollX; const scrollY = window.scrollY; x.set(e.clientX - rect.left + scrollX); y.set(e.clientY - rect.top + scrollY); } }; const handleMouseLeave = () => { setIsInside(false); }; const handleMouseEnter = () => { setIsInside(true); }; return (

{isInside && } {children}

); }; export const FollowPointer = ({ x, y, title, }: { x: any; y: any; title?: string | React.ReactNode; }) => { const colors = [ "#0ea5e9", "#737373", "#14b8a6", "#22c55e", "#3b82f6", "#ef4444", "#eab308", ]; return ( {title || \`William Shakespeare\`} ); }; `,__rawStringJsx__:`// Core component that receives mouse positions and renders pointer and content import React, { useEffect, useState } from "react"; import { motion, AnimatePresence, useMotionValue } from "motion/react"; import { cn } from "@/lib/utils"; export const FollowerPointerCard = ({ children, className, title }) => { const x = useMotionValue(0); const y = useMotionValue(0); const ref = React.useRef(null); const [rect, setRect] = useState(null); const [isInside, setIsInside] = useState(false); // Add this line useEffect(() => { if (ref.current) { setRect(ref.current.getBoundingClientRect()); } }, []); const handleMouseMove = (e) => { if (rect) { const scrollX = window.scrollX; const scrollY = window.scrollY; x.set(e.clientX - rect.left + scrollX); y.set(e.clientY - rect.top + scrollY); } }; const handleMouseLeave = () => { setIsInside(false); }; const handleMouseEnter = () => { setIsInside(true); }; return (

{isInside && } {children}

); }; export const FollowPointer = ({ x, y, title }) => { const colors = [ "#0ea5e9", "#737373", "#14b8a6", "#22c55e", "#3b82f6", "#ef4444", "#eab308", ]; return ( {title || \`William Shakespeare\`} ); }; `,__src__:"/src/registry/default/ui/following-pointer.tsx",__style__:"default",children:(0,i.jsxs)(e.code,{"data-language":"tsx","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:[(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#54617B","--shiki-bearded-font-style":"italic",color:"var(--shiki-bearded)"},children:"// Core component that receives mouse positions and renders pointer and content"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" React"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" useEffect"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" useState"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "react"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" motion"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" AnimatePresence"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" useMotionValue"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "motion/react"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" cn"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "@/lib/utils"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"export"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" FollowerPointerCard"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ({"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" children"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" title"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" children"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" React"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"ReactNode"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" string"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" title"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" string"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" |"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" React"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"ReactNode"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"})"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" x"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useMotionValue"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"0"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" y"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useMotionValue"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"0"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" ref"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" React"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"useRef"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"<"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"HTMLDivElement"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:">("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:"null"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"rect"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" setRect"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"]"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useState"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"<"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"DOMRect"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" |"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" null"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:">("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:"null"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"isInside"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" setIsInside"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"]"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useState"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"<"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"boolean"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:">("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:"false"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#54617B","--shiki-bearded-font-style":"italic",color:"var(--shiki-bearded)"},children:" // Add this line"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useEffect"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"(()"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" if"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"ref"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"current"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" setRect"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"ref"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"current"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"getBoundingClientRect"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"());"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" []);"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" handleMouseMove"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:"e"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" React"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"MouseEvent"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"<"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"HTMLDivElement"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:">)"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" if"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"rect"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" scrollX"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" window"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"scrollX"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" scrollY"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" window"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"scrollY"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" x"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"set"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"e"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"clientX"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" -"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" rect"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"left"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" +"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" scrollX"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" y"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"set"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"e"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"clientY"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" -"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" rect"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"top"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" +"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" scrollY"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" };"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" handleMouseLeave"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ()"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" setIsInside"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:"false"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" };"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" handleMouseEnter"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ()"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" setIsInside"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:"true"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" };"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" onMouseLeave"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"handleMouseLeave"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" onMouseEnter"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"handleMouseEnter"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" onMouseMove"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"handleMouseMove"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" style"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" cursor"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "none"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" ref"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"ref"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"cn"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"relative"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")}"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" >"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"AnimatePresence"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"isInside"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" &&"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"FollowPointer"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" x"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"x"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" y"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"y"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" title"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"title"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"children"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"};"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"export"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" FollowPointer"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ({"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" x"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" y"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" title"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" x"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" any"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" y"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" any"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" title"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" string"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" |"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" React"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"ReactNode"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"})"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" colors"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "#0ea5e9"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "#737373"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "#14b8a6"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "#22c55e"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "#3b82f6"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "#ef4444"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "#eab308"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ];"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"motion.div"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"absolute z-50 h-4 w-4 rounded-full"'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" style"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" top"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" y"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" left"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" x"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" pointerEvents"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "none"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" initial"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" scale"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 1"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" opacity"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 1"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" animate"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" scale"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 1"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" opacity"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 1"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" exit"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" scale"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" opacity"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" >"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"svg"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" stroke"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"currentColor"'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" fill"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"currentColor"'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" strokeWidth"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"1"'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" viewBox"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"0 0 16 16"'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"h-6 w-6 -translate-x-[12px] -translate-y-[10px] -rotate-[70deg] transform stroke-sky-600 text-sky-500"'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" height"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"1em"'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" width"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"1em"'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" xmlns"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"http://www.w3.org/2000/svg"'})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" >"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"path"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" d"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"M14.082 2.182a.5.5 0 0 1 .103.557L8.528 15.467a.5.5 0 0 1-.917-.007L5.57 10.694.803 8.652a.5.5 0 0 1-.006-.916l12.728-5.657a.5.5 0 0 1 .556.103z"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"motion.div"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" style"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" backgroundColor"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" colors"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"["}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"Math"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"floor"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"Math"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"random"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"()"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" *"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" colors"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:"length"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")],"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" initial"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" scale"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0.5"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" opacity"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" animate"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" scale"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 1"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" opacity"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 1"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" exit"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" scale"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0.5"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" opacity"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "min-w-max rounded-full bg-neutral-200 px-2 py-2 text-xs whitespace-nowrap text-white"'})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" >"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"title"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" ||"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" `William Shakespeare`"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"};"})})]})})})})]})})]}),` `,(0,i.jsxs)(e.h2,{id:"props",children:[(0,i.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#props",children:(0,i.jsx)(e.span,{className:"icon icon-link"})}),"Props"]}),` `,(0,i.jsxs)(e.h2,{id:"followerpointercard-props",children:[(0,i.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#followerpointercard-props",children:(0,i.jsx)(e.span,{className:"icon icon-link"})}),"FollowerPointerCard Props"]}),` `,(0,i.jsxs)(e.table,{children:[(0,i.jsx)(e.thead,{children:(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.th,{children:"Prop name"}),(0,i.jsx)(e.th,{children:"Type"}),(0,i.jsx)(e.th,{children:"Description"})]})}),(0,i.jsxs)(e.tbody,{children:[(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"children"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"React.ReactNode"})}),(0,i.jsx)(e.td,{children:"The content to be rendered inside the component."})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"className"})}),(0,i.jsxs)(e.td,{children:[(0,i.jsx)(e.code,{children:"string"})," (optional)"]}),(0,i.jsx)(e.td,{children:"The class name of the FollowerPointerCard component."})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"title"})}),(0,i.jsxs)(e.td,{children:[(0,i.jsx)(e.code,{children:"string or ReactNode"})," (optional)"]}),(0,i.jsx)(e.td,{children:"The title to be displayed on the pointer."})]})]})]})]})}function D(r={}){let{wrapper:e}=r.components||{};return e?(0,i.jsx)(e,{...r,children:(0,i.jsx)(y,{...r})}):y(r)}function s(r,e){throw new Error("Expected "+(e?"component":"object")+" `"+r+"` to be defined: you likely forgot to import, pass, or provide it.")}return x(w);})(); ;return Component;

Best Free Feature Components for your Tailwind CSS and React project

Aceternity UI