} >

{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}

); `,__src__:"src/registry/default/example/following-pointer-demo.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"Image"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"next/image"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"FollowerPointerCard"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"../ui/following-pointer"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" FollowingPointerDemo"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"div "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"w-80 mx-auto"'}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"FollowerPointerCard"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"TitleComponent"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"blogContent"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"author"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"avatar"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"blogContent"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"authorAvatar"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"relative overflow-hidden h-full rounded-2xl transition duration-200 group bg-white hover:shadow-xl border border-zinc-100"'}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"w-full aspect-w-16 aspect-h-10 bg-gray-100 rounded-tr-lg rounded-tl-lg overflow-hidden xl:aspect-w-16 xl:aspect-h-10 relative"'}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"Image"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"src"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"blogContent"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"image"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"alt"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"thumbnail"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"layout"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"fill"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"objectFit"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"cover"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:"`group-hover:scale-95 group-hover:rounded-2xl transform object-cover transition duration-200 `"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'" p-4"'}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"h2"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"font-bold my-4 text-lg text-zinc-700"'}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"blogContent"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"h2"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"font-normal my-4 text-sm text-zinc-500"'}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"blogContent"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"flex flex-row justify-between items-center mt-10"'}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"text-sm text-gray-500"'}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"blogContent"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"date"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"relative z-10 px-6 py-2 bg-black text-white font-bold rounded-xl block text-xs"'}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" Read More"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"blogContent"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"slug"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"amazing-tailwindcss-grid-layouts"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"author"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"Manu Arora"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"date"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"28th March, 2023"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"Amazing Tailwindcss Grid Layout Examples"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},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,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"image"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"/demo/thumbnail.png"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"authorAvatar"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"/manu.png"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"};"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"TitleComponent"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"({"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"avatar"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}:"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"avatar"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"})"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"flex space-x-2 items-center"'}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"Image"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"src"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"avatar"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"height"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"20"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"width"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"20"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"alt"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"thumbnail"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"rounded-full border-2 border-white"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})})]})})})}),` `,(0,n.jsxs)(l.h2,{id:"installation",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,n.jsxs)(r,{children:[(0,n.jsx)(c,{children:"Install dependencies"}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm i framer-motion clsx tailwind-merge `,children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:"npm "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:"i"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:"framer-motion"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:"clsx"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:"tailwind-merge"})]})})})}),(0,n.jsx)(c,{children:"Add util file"}),(0,n.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,n.jsx)(l.div,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"default",children:"utils/cn.ts"}),(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__withMeta__:!0,__rawString__:`import { ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } `,children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"ClassValue"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"clsx"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"clsx"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"twMerge"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"tailwind-merge"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" cn"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"(..."}),(0,n.jsx)(l.span,{style:{color:"#F38CEC"},children:"inputs"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"ClassValue"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"[])"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" twMerge"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"clsx"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"inputs"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"));"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})})]})})]}),(0,n.jsx)(c,{children:"Copy the source code"}),(0,n.jsx)(l.p,{children:(0,n.jsx)(l.code,{children:"components/ui/following-pointer.tsx"})}),(0,n.jsx)(i,{name:"following-pointer",children:(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`// Core component that receives mouse positions and renders pointer and content import React, { useEffect, useState } from "react"; import { motion, AnimatePresence, useMotionValue } from "framer-motion"; 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 = [ "var(--sky-500)", "var(--neutral-500)", "var(--teal-500)", "var(--green-500)", "var(--blue-500)", "var(--red-500)", "var(--yellow-500)", ]; return ( {title || \`William Shakespeare\`} ); }; `,__src__:"src/registry/default/ui/following-pointer.tsx",__style__:"default",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#54617B",fontStyle:"italic"},children:"// Core component that receives mouse positions and renders pointer and content"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"useEffect"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"react"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"motion"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"AnimatePresence"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"useMotionValue"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"framer-motion"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"@/lib/utils"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"FollowerPointerCard"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"({"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}:"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"ReactNode"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"|"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"ReactNode"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"})"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"useMotionValue"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"useMotionValue"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"useRef"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"HTMLDivElement"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:">("}),(0,n.jsx)(l.span,{style:{color:"#E35535"},children:"null"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"rect"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"setRect"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"]"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"DOMRect"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"|"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"null"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:">("}),(0,n.jsx)(l.span,{style:{color:"#E35535"},children:"null"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"isInside"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"setIsInside"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"]"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"boolean"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:">("}),(0,n.jsx)(l.span,{style:{color:"#E35535"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#54617B",fontStyle:"italic"},children:"// Add this line"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"useEffect"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"(()"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"if"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"current"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"setRect"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"current"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"getBoundingClientRect"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"());"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"},"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"[]);"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"handleMouseMove"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#F38CEC"},children:"e"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"MouseEvent"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"HTMLDivElement"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:">)"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"if"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"rect"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"scrollX"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"window"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"scrollX"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"scrollY"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"window"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"scrollY"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"set"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"e"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"clientX"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"rect"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"left"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"+"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"scrollX"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"set"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"e"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"clientY"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"rect"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"top"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"+"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"scrollY"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"};"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"handleMouseLeave"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"setIsInside"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E35535"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"};"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"handleMouseEnter"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"setIsInside"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#E35535"},children:"true"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"};"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"onMouseLeave"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"handleMouseLeave"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"onMouseEnter"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"handleMouseEnter"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"onMouseMove"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"handleMouseMove"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"style"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"cursor"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"none"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"relative"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:")}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"AnimatePresence"}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"isInside"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"FollowPointer"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"};"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"FollowPointer"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"({"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}:"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"any"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"any"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"|"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"ReactNode"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"})"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"colors"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"var(--sky-500)"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"var(--neutral-500)"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"var(--teal-500)"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"var(--green-500)"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"var(--blue-500)"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"var(--red-500)"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"var(--yellow-500)"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"];"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"h-4 w-4 rounded-full absolute z-50"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"style"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"top"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"y"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"left"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"x"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"pointerEvents"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"none"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"scale"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"scale"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"exit"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"scale"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"svg"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"stroke"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"currentColor"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"fill"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"currentColor"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"strokeWidth"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"1"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"viewBox"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"0 0 16 16"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"h-6 w-6 text-sky-500 transform -rotate-[70deg] -translate-x-[12px] -translate-y-[10px] stroke-sky-600"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"height"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"1em"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"width"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"1em"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"xmlns"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"http://www.w3.org/2000/svg"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"path"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"d"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},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,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"motion.div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"style"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"backgroundColor"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"colors"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"Math"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"floor"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"Math"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"random"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"colors"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:"length"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:")],"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"initial"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"scale"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"0.5"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"animate"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"scale"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"exit"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"scale"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"0.5"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"opacity"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"px-2 py-2 bg-neutral-200 text-white whitespace-nowrap min-w-max text-xs rounded-full"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"||"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:"`William Shakespeare`"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"};"})})]})})})}),(0,n.jsxs)(c,{children:["Add the following code in ",(0,n.jsx)(l.code,{children:"tailwind.config.js"})," file"]}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"js","data-theme":"default",__rawString__:`const defaultTheme = require("tailwindcss/defaultTheme"); const colors = require("tailwindcss/colors"); const { default: flattenColorPalette, } = require("tailwindcss/lib/util/flattenColorPalette"); /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{ts,tsx}"], darkMode: "class", theme: { // rest of the code }, plugins: [ // rest of the code addVariablesForColors, ], }; // This plugin adds each Tailwind color as a global CSS variable, e.g. var(--gray-200). function addVariablesForColors({ addBase, theme }: any) { let allColors = flattenColorPalette(theme("colors")); let newVars = Object.fromEntries( Object.entries(allColors).map(([key, val]) => [\`--\${key}\`, val]) ); addBase({ ":root": newVars, }); } `,children:(0,n.jsxs)(l.code,{"data-language":"js","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"defaultTheme"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"require"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"tailwindcss/defaultTheme"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"colors"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"require"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"tailwindcss/colors"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"default"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"flattenColorPalette"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"require"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"tailwindcss/lib/util/flattenColorPalette"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#54617B",fontStyle:"italic"},children:"/** "}),(0,n.jsx)(l.span,{style:{color:"#EACD61",fontStyle:"italic"},children:"@type"}),(0,n.jsx)(l.span,{style:{color:"#54617B",fontStyle:"italic"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160",fontStyle:"italic"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#B78AFF",fontStyle:"italic"},children:"import('tailwindcss').Config"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160",fontStyle:"italic"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#54617B",fontStyle:"italic"},children:" */"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"module"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"exports"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"content"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"./src/**/*.{ts,tsx}"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"],"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"darkMode"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"class"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"theme"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#54617B",fontStyle:"italic"},children:"// rest of the code"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"},"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E1"},children:"plugins"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#54617B",fontStyle:"italic"},children:"// rest of the code"})]}),` `,(0,n.jsxs)(l.span,{className:"line line--highlighted",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"addVariablesForColors"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"],"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"};"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsx)(l.span,{className:"line line--highlighted",children:(0,n.jsx)(l.span,{style:{color:"#54617B",fontStyle:"italic"},children:"// This plugin adds each Tailwind color as a global CSS variable, e.g. var(--gray-200)."})}),` `,(0,n.jsxs)(l.span,{className:"line line--highlighted",children:[(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" addVariablesForColors"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"({"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F38CEC"},children:"addBase"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F38CEC"},children:"theme"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}:"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B78AFF"},children:"any"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line line--highlighted",children:[(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"let"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"allColors"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" flattenColorPalette"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"theme"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'"colors"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"));"})]}),` `,(0,n.jsxs)(l.span,{className:"line line--highlighted",children:[(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#22ECDB"},children:"let"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"newVars"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"Object"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"fromEntries"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line line--highlighted",children:[(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF955C"},children:"Object"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"entries"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"allColors"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:")."}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"((["}),(0,n.jsx)(l.span,{style:{color:"#F38CEC"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F38CEC"},children:"val"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"])"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:"`--"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"${"}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:"`"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"val"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"])"})]}),` `,(0,n.jsxs)(l.span,{className:"line line--highlighted",children:[(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line line--highlighted",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line line--highlighted",children:[(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" addBase"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"({"})]}),` `,(0,n.jsxs)(l.span,{className:"line line--highlighted",children:[(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3CEC85"},children:'":root"'}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF738A"},children:"newVars"}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line line--highlighted",children:[(0,n.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"});"})]}),` `,(0,n.jsx)(l.span,{className:"line line--highlighted",children:(0,n.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})})]})})})]}),` `,(0,n.jsxs)(l.h2,{id:"props",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#props",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Props"]}),` `,(0,n.jsxs)(l.h2,{id:"followerpointercard-props",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#followerpointercard-props",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"FollowerPointerCard Props"]}),` `,(0,n.jsxs)(l.table,{children:[(0,n.jsx)(l.thead,{children:(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.th,{children:"Prop name"}),(0,n.jsx)(l.th,{children:"Type"}),(0,n.jsx)(l.th,{children:"Description"})]})}),(0,n.jsxs)(l.tbody,{children:[(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"children"})}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"React.ReactNode"})}),(0,n.jsx)(l.td,{children:"The content to be rendered inside the component."})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"className"})}),(0,n.jsxs)(l.td,{children:[(0,n.jsx)(l.code,{children:"string"})," (optional)"]}),(0,n.jsx)(l.td,{children:"The class name of the FollowerPointerCard component."})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"title"})}),(0,n.jsxs)(l.td,{children:[(0,n.jsx)(l.code,{children:"string or ReactNode"})," (optional)"]}),(0,n.jsx)(l.td,{children:"The title to be displayed on the pointer."})]})]})]})]})}function g(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,Object.assign({},e,{children:(0,n.jsx)(p,e)})):p(e)}var f=g;function a(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return N(w);})(); ;return Component;

Aceternity UI