50: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"] 51: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"] 52:T24d6,import { Suspense } from "react" import { enrichTweet, type EnrichedTweet, type TweetProps } from "react-tweet" import { getTweet, type Tweet } from "react-tweet/api" import { cn } from "@/lib/utils" interface TwitterIconProps { className?: string [key: string]: unknown } const Twitter = ({ className, ...props }: TwitterIconProps) => ( ) const Verified = ({ className, ...props }: TwitterIconProps) => ( ) export const truncate = (str: string | null, length: number) => { if (!str || str.length <= length) return str return `${str.slice(0, length - 3)}...` } const Skeleton = ({ className, ...props }: React.HTMLAttributes) => { return (

) } export const TweetSkeleton = ({ className, ...props }: { className?: string [key: string]: unknown }) => (

) export const TweetNotFound = ({ className, ...props }: { className?: string [key: string]: unknown }) => (

Tweet not found

) export const TweetHeader = ({ tweet }: { tweet: EnrichedTweet }) => (

${tweet.user.screen_name}$

{truncate(tweet.user.name, 20)} {tweet.user.verified || (tweet.user.is_blue_verified && ( ))}

@{truncate(tweet.user.screen_name, 16)}

Link to tweet

) export const TweetBody = ({ tweet }: { tweet: EnrichedTweet }) => (

{tweet.entities.map((entity, idx) => { switch (entity.type) { case "url": case "symbol": case "hashtag": case "mention": return ( {entity.text} ) case "text": return ( ) default: return null } })}

) export const TweetMedia = ({ tweet }: { tweet: EnrichedTweet }) => { if (!tweet.video && !tweet.photos) return null return (

{tweet.video && (

)} {tweet.photos && (

{tweet.photos.map((photo) => ( {tweet.text}

))}

)} {!tweet.video && !tweet.photos && // @ts-expect-error package doesn't have type definitions tweet?.card?.binding_values?.thumbnail_image_large?.image_value.url && ( {tweet.text}

)}

) } const withSafeEntities = ( tweet: T ): T & { entities: Tweet["entities"] } => ({ ...tweet, entities: { ...tweet.entities, hashtags: tweet.entities?.hashtags ?? [], urls: tweet.entities?.urls ?? [], symbols: tweet.entities?.symbols ?? [], user_mentions: tweet.entities?.user_mentions ?? [], }, }) export const MagicTweet = ({ tweet, className, ...props }: { tweet: Tweet className?: string }) => { const safeTweet: Tweet = { ...withSafeEntities(tweet), quoted_tweet: tweet.quoted_tweet ? withSafeEntities(tweet.quoted_tweet) : undefined, } const enrichedTweet = enrichTweet(safeTweet) return (

) } /** * TweetCard (Server Side Only) */ export const TweetCard = async ({ id, components, fallback = , onError, ...props }: TweetProps & { className?: string }) => { const tweet = id ? await getTweet(id).catch((err) => { if (onError) { onError(err) } else { console.error(err) } }) : undefined if (!tweet) { const NotFound = components?.TweetNotFound ?? TweetNotFound return } return ( ) } 4f:["$","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","react-tweet",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-tweet","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":"react-tweet"}]]}]}]]}],["$","$L50",null,{"namespace":"@magicui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/magicui/tweet-card.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]