53:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 54:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 55:T2eb4,"use client"; import React, { useEffect, useId, useRef, useState } from "react"; import { AnimatePresence, motion } from "motion/react"; import Image from "next/image"; import { Button } from "@/components/ui/button"; const useOutsideClick = ( ref: React.RefObject, callback: Function ) => { useEffect(() => { const listener = (event: any) => { if (!ref.current || ref.current.contains(event.target)) { return; } callback(event); }; document.addEventListener("mousedown", listener); document.addEventListener("touchstart", listener); return () => { document.removeEventListener("mousedown", listener); document.removeEventListener("touchstart", listener); }; }, [ref, callback]); }; export default function ExpandableCardMotion() { const [active, setActive] = useState<(typeof cards)[number] | boolean | null>( null ); const ref = useRef(null); const id = useId(); useEffect(() => { function onKeyDown(event: KeyboardEvent) { if (event.key === "Escape") { setActive(false); } } if (active && typeof active === "object") { document.body.style.overflow = "hidden"; } else { document.body.style.overflow = "auto"; } window.addEventListener("keydown", onKeyDown); return () => window.removeEventListener("keydown", onKeyDown); }, [active]); useOutsideClick(ref as any, () => setActive(null)); return ( <> {active && typeof active === "object" && ( )} {active && typeof active === "object" ? (

setActive(null)} > {active.title}

{active.title} {active.author}

{typeof active.content === "function" ? active.content() : active.content}

) : null}

setActive(card)} className="p-4 flex flex-col md:flex-row justify-between items-center hover:bg-neutral-50 dark:hover:bg-white/10 rounded-xl cursor-pointer" >

{card.title} {card.author}

); } const CloseIcon = () => { return ( ); }; const cards = [ { author: "David Mathew", title: "As yen tumbles, gadget-loving Japan goes for secondhand iPhones", src: "/images/blog/blog-img1.jpg", ctaText: "Read", ctaLink: "https://nextjs.tailwind-admin.com/apps/blog/post", content: () => { return (

But you cannot figure out what it is or what it can do. MTA web directory is the simplest way in which one can bid on a link, or a few links if they wish to do so. The link directory on MTA displays all of the links it currently has, and does so in alphabetical order, which makes it much easier for someone to find what they are looking for if it is something specific and they do not want to go through all the other sites and links as well. It allows you to start your bid at the bottom and slowly work your way to the top of the list

); }, }, { author: "Ben Stokes", title: "Intel loses bid to revive antitrust case against patent foe Fortress", src: "/images/blog/blog-img2.jpg", ctaText: "Read", ctaLink: "https://nextjs.tailwind-admin.com/apps/blog/post", content: () => { return (

); }, }, { author: "Michael Jhonson", title: "COVID outbreak deepens as more lockdowns loom in China", src: "/images/blog/blog-img3.jpg", ctaText: "Read", ctaLink: "https://nextjs.tailwind-admin.com/apps/blog/post", content: () => { return (

); }, }, { author: "Sanju Samson", title: "Streaming video way before it was cool, go dark tomorrow", src: "/images/blog/blog-img4.jpg", ctaText: "Read", ctaLink: "https://nextjs.tailwind-admin.com/apps/blog/post", content: () => { return (

); }, }, { author: "Peter Parker", title: "After Twitter Staff Cuts, Survivors Face Radio Silence", src: "/images/blog/blog-img5.jpg", ctaText: "Read", ctaLink: "https://nextjs.tailwind-admin.com/apps/blog/post", content: () => { return (

); }, }, ]; 52:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion/react"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L53",null,{"namespace":"@tailwind-admin","registryDependencies":["button"]}]]}],null]}],["$","$L54",null,{"files":[{"path":"src/app/components/animatedComponents/cards/expandable-card/ExpandableCardMotion.tsx","content":"$55","type":"registry:component","target":"components/animated/cards/expandable-card/ExpandableCardMotion.tsx"}],"className":"h-[70svh] min-h-80"}]]}]