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 ( ) }

Tweet Card

Instalação

Dependências