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:T2a6b,/* eslint-disable @next/next/no-img-element */ import { cn } from "@/lib/utils"; import { Suspense } from "react"; import { type EnrichedTweet, enrichTweet, type TweetProps } from "react-tweet"; import { getTweet, type Tweet } from "react-tweet/api"; interface IconProps { className?: string; [key: string]: unknown; } const ExternalLink = ({ className, ...props }: IconProps) => ( ); 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) => (

); 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, avatarRounded = "rounded", }: { tweet: EnrichedTweet; avatarRounded?: string; }) => (

${tweet.user.screen_name}$

{tweet.user.name}

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

); 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 ( {entity.text} ); default: return null; } })}

); export const TweetMedia = ({ tweet }: { tweet: EnrichedTweet }) => { const hasVideo = tweet.video && Array.isArray(tweet.video.variants) && tweet.video.variants.length > 0; const hasPhotos = tweet.photos && tweet.photos.length > 0; const hasCardThumbnail = // @ts-expect-error package doesn't have type definitions tweet?.card?.binding_values?.thumbnail_image_large?.image_value.url; if (!(hasVideo || hasPhotos || hasCardThumbnail)) { return null; } return (

{hasVideo && tweet.video ? (

) : null} {hasPhotos && tweet.photos ? (() => { const { photos } = tweet; return (

{photos.length === 1 && ( {tweet.text}

)} {photos.length === 2 && (

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

))}

)} {photos.length >= 3 && (

{photos.slice(0, 4).map((photo, index) => ( {tweet.text}

3 && "row-span-2" )} draggable={false} height={photo.height} key={photo.url} src={photo.url} title={`Photo by ${tweet.user.name}`} width={photo.width} /> ))}

)}

); })() : null} {!(hasVideo || hasPhotos) && hasCardThumbnail && ( {tweet.text}

)}

); }; const entityList = (value: T[] | undefined): T[] => Array.isArray(value) ? value : []; // react-tweet's enrichTweet walks hashtags, mentions, urls, and symbols // with for...of, including on quoted_tweet. The syndication API omits // those arrays (entities can be {}), which throws "entities is not iterable". const iterableEntities = ( entities: Tweet["entities"] | undefined ): Tweet["entities"] => ({ hashtags: entityList(entities?.hashtags), symbols: entityList(entities?.symbols), urls: entityList(entities?.urls), user_mentions: entityList(entities?.user_mentions), ...(Array.isArray(entities?.media) ? { media: entities.media } : {}), }); const withIterableEntities = (tweet: Tweet): Tweet => ({ ...tweet, entities: iterableEntities(tweet.entities), ...(tweet.quoted_tweet ? { quoted_tweet: { ...tweet.quoted_tweet, entities: iterableEntities(tweet.quoted_tweet.entities), }, } : {}), }); export const SmoothTweet = ({ tweet, className, userInfoPosition = "bottom", avatarRounded = "rounded", ...props }: { tweet: Tweet; className?: string; userInfoPosition?: "top" | "bottom"; avatarRounded?: string; }) => { const enrichedTweet = enrichTweet(withIterableEntities(tweet)); const userInfo = ( ); const content = (

{userInfoPosition === "bottom" && userInfo}

); return (

{userInfoPosition === "top" && userInfo} {content}

); }; /** * TweetCard (Server Side Only) */ export type TweetCardProps = TweetProps & { className?: string; userInfoPosition?: "top" | "bottom"; avatarRounded?: string; }; export const TweetCard = async ({ id, components, fallback = , onError, ...props }: TweetCardProps) => { 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 ( ); }; export { ClientTweetCard } from "./client"; export default TweetCard; 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":"@smoothui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"client.tsx","content":"\"use client\";\n\nimport { type TweetProps, useTweet } from \"react-tweet\";\n\nimport { SmoothTweet, TweetNotFound, TweetSkeleton } from \"./index\";\n\nexport type ClientTweetCardProps = TweetProps & {\n className?: string;\n userInfoPosition?: \"top\" | \"bottom\";\n avatarRounded?: string;\n};\n\nexport const ClientTweetCard = ({\n id,\n apiUrl,\n fallback = ,\n components,\n fetchOptions,\n onError,\n ...props\n}: ClientTweetCardProps) => {\n const { data, error, isLoading } = useTweet(id, apiUrl, fetchOptions);\n\n if (isLoading) {\n return fallback;\n }\n if (error || !data) {\n const NotFound = components?.TweetNotFound || TweetNotFound;\n return ;\n }\n\n return ;\n};\n","type":"registry:ui","target":"components/smoothui/tweet-card/client.tsx"},{"path":"index.tsx","content":"$52","type":"registry:ui","target":"components/smoothui/tweet-card/index.tsx"}],"className":"h-[70svh] min-h-80"}]]}]