51: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"] 52: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"] 53:T2c4c,"use client"; import { BadgeCheckIcon, CheckIcon, HeartIcon, LinkIcon } from "lucide-react"; import { useEffect, useRef, useState, type ComponentProps } from "react"; import { enrichTweet, useTweet, type EnrichedTweet } from "react-tweet"; import type { Tweet, TweetEntities } from "react-tweet/api"; import { cn } from "@/registry/default/lib/utils"; // The X logo. const X_LOGO = "M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z"; const ENTITIES: Record = { amp: "&", lt: "<", gt: ">", quot: '"', apos: "'", nbsp: "\u00a0", }; /** X sends tweet text HTML-escaped. Decode it as text, never as markup. */ function decode(text: string) { return text.replace(/&(#x[\da-f]+|#\d+|[a-z]+);/gi, (match, entity: string) => { if (entity[0] === "#") { const code = entity[1] === "x" || entity[1] === "X" ? parseInt(entity.slice(2), 16) : parseInt(entity.slice(1), 10); return Number.isFinite(code) && code > 0 && code < 0x110000 ? String.fromCodePoint(code) : match; } return ENTITIES[entity.toLowerCase()] ?? match; }); } function compact(count: number) { return new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1 }).format( count ); } /** * The syndication API leaves out empty entity lists, and older versions of * the enricher assumed they were there. Fill them in, and fall back to * nothing rather than throwing on a tweet shape nobody expected. */ const ENTITY_LISTS = ["hashtags", "urls", "user_mentions", "symbols"] as const; function enrich(tweet: Tweet): EnrichedTweet | null { const entities: Partial = { ...tweet.entities }; for (const list of ENTITY_LISTS) entities[list] ??= []; try { return enrichTweet({ ...tweet, entities: entities as TweetEntities }); } catch { return null; } } const frame = "w-full max-w-xl rounded-xl border bg-card p-4 text-card-foreground shadow"; /** The card's size and shape while a tweet loads. */ function TweetCardSkeleton({ className, ...props }: ComponentProps<"div">) { return (

); } /** What shows when a tweet is deleted, private or could not be fetched. */ function TweetCardUnavailable({ className, ...props }: ComponentProps<"div">) { return (

This post is unavailable.

); } function CopyLink({ url }: { url: string }) { const [copied, setCopied] = useState(false); const timer = useRef>(undefined); useEffect(() => () => clearTimeout(timer.current), []); const copy = async () => { try { await navigator.clipboard.writeText(url); } catch { return; } setCopied(true); clearTimeout(timer.current); timer.current = setTimeout(() => setCopied(false), 1600); }; return ( ); } interface TweetCardProps extends Omit, "children"> { /** The tweet as the syndication API returns it: from `getTweet`, `useTweet` or your own fetch. */ tweet: Tweet; showDate?: boolean; showLikes?: boolean; showCopyLink?: boolean; /** Locale for the date. A fixed default keeps the server and the browser in agreement. */ locale?: string; /** Time zone for the date. */ timeZone?: string; } /** * A post from X, drawn with your theme instead of an embed: no iframe, no * third-party script, and text you can select. Mentions, hashtags and links * are real links; the text is decoded as text, never injected as HTML. * Photos carry their alt text and videos have controls rather than * autoplaying. For server components, `Tweet` fetches by id and renders * this card. * * @example * const { data } = useTweet(id); * return data ? : ; */ function TweetCard({ tweet: raw, showDate = true, showLikes = true, showCopyLink = true, locale = "en-US", timeZone = "UTC", className, ...props }: TweetCardProps) { const tweet = enrich(raw); if (!tweet) return ; const date = new Date(tweet.created_at); const photos = tweet.mediaDetails?.filter((media) => media.type === "photo") ?? []; const video = tweet.video; const source = video?.variants.find((variant) => variant.type === "video/mp4") ?? video?.variants[0]; return (

{tweet.user.name} {tweet.user.verified || tweet.user.is_blue_verified ? ( ) : null} @{tweet.user.screen_name}

{tweet.entities.map((entity, index) => entity.type === "text" ? ( {decode(entity.text)} ) : entity.type === "media" ? null : ( {decode(entity.text)} ) )}

{photos.length > 0 ? (

1 && "grid-cols-2" )} > {photos.map((photo, index) => ( {photo.type

))}

) : null} {video && source ? (

) : null} {showDate ? ( {new Intl.DateTimeFormat(locale, { hour: "numeric", minute: "2-digit", month: "short", day: "numeric", year: "numeric", timeZone, }).format(date)} ) : null} {showLikes || showCopyLink ? ( ) : null}

); } /** * Fetches a tweet in the browser and renders it. It uses react-tweet's * `useTweet`, which by default asks react-tweet's public endpoint; pass * `apiUrl` to go through your own route instead. */ function ClientTweet({ id, apiUrl, ...props }: Omit & { id: string; apiUrl?: string }) { const { data, isLoading } = useTweet(id, apiUrl); if (isLoading) return ; if (!data) return ; return ; } export { ClientTweet, TweetCard, TweetCardSkeleton, TweetCardUnavailable, type TweetCardProps }; 54:T496,import { getTweet } from "react-tweet/api"; import { TweetCard, TweetCardUnavailable, type TweetCardProps, } from "@/registry/default/ui/tweet-card"; interface TweetProps extends Omit { /** The id at the end of the post's URL. */ id: string; /** Passed to `fetch`, e.g. `{ next: { revalidate: 3600 } }` to cache it in Next.js. */ fetchOptions?: RequestInit; } /** * A server component that fetches a post from X's syndication API while * the page renders and shows it with TweetCard: nothing is fetched in the * browser and no third-party script loads. Wrap it in `` with a * `TweetCardSkeleton` fallback to stream the rest of the page first. In * client components, use `ClientTweet` instead. * * @example * }> * * */ async function Tweet({ id, fetchOptions, ...props }: TweetProps) { const tweet = await getTweet(id, fetchOptions).catch(() => undefined); if (!tweet) return ; return ; } export { Tweet, type TweetProps }; 50:["$","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@^3.3.1",{"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@^3.3.1"}]]}]}],["$","li","lucide-react@^1.48.0",{"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@^1.48.0"}]]}]}]]}],["$","$L51",null,{"namespace":"@corsair-ui","registryDependencies":["@corsair-ui/utils"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/default/ui/tweet-card.tsx","content":"$53","type":"registry:ui"},{"path":"registry/default/ui/tweet.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]