{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "tweet", "title": "Tweet", "description": "Embed Twitter/X posts with custom styling.", "dependencies": [ "react-tweet", "@icons-pack/react-simple-icons" ], "registryDependencies": [], "files": [ { "path": "registry/spell-ui/tweet.tsx", "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport {\n enrichTweet,\n useTweet,\n type EnrichedTweet,\n} from \"react-tweet\";\nimport { cn } from \"@/lib/utils\";\nimport { Check, Link2 } from \"lucide-react\";\nimport { SiX } from \"@icons-pack/react-simple-icons\";\n\nconst VerifiedBadge = ({ className }: { className?: string }) => (\n \n \n \n);\n\nconst formatNumber = (num: number): string => {\n if (num >= 1000000) {\n return (num / 1000000).toFixed(1).replace(/\\.0$/, \"\") + \"M\";\n }\n if (num >= 1000) {\n return (num / 1000).toFixed(1).replace(/\\.0$/, \"\") + \"k\";\n }\n return num.toString();\n};\n\nconst formatDate = (dateString: string): string => {\n const date = new Date(dateString);\n const hours = date.getHours();\n const minutes = date.getMinutes();\n const ampm = hours >= 12 ? \"PM\" : \"AM\";\n const hour12 = hours % 12 || 12;\n const monthNames = [\n \"Jan\",\n \"Feb\",\n \"Mar\",\n \"Apr\",\n \"May\",\n \"Jun\",\n \"Jul\",\n \"Aug\",\n \"Sep\",\n \"Oct\",\n \"Nov\",\n \"Dec\",\n ];\n const month = monthNames[date.getMonth()];\n const day = date.getDate();\n const year = date.getFullYear();\n\n return `${hour12}:${minutes.toString().padStart(2, \"0\")} ${ampm} ยท ${month} ${day}, ${year}`;\n};\n\nconst TweetSkeleton = ({ className }: { className?: string }) => (\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n);\n\nconst TweetNotFound = ({ className }: { className?: string }) => (\n \n

Tweet not found

\n
\n);\n\nconst TweetHeader = ({ tweet }: { tweet: EnrichedTweet }) => (\n
\n
\n \n
\n \n {tweet.user.name}\n {(tweet.user.verified || tweet.user.is_blue_verified) && (\n \n )}\n \n \n @{tweet.user.screen_name}\n \n
\n
\n \n \n \n
\n);\n\nconst TweetBody = ({ tweet }: { tweet: EnrichedTweet }) => (\n

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

\n);\n\nconst TweetMedia = ({ tweet }: { tweet: EnrichedTweet }) => {\n if (!tweet.video && !tweet.photos) return null;\n\n const getVideoSource = () => {\n if (!tweet.video?.variants) return null;\n\n const getResolution = (url: string): number => {\n const match = url.match(/\\/(\\d+)x(\\d+)\\//);\n if (match) {\n return parseInt(match[1]) * parseInt(match[2]);\n }\n return 0;\n };\n\n const mp4Variants = tweet.video.variants\n .filter((v) => v.type === \"video/mp4\")\n .sort((a, b) => getResolution(b.src) - getResolution(a.src));\n\n if (mp4Variants.length > 0) {\n return { src: mp4Variants[0].src, type: \"video/mp4\" };\n }\n\n const firstVariant = tweet.video.variants[0];\n return { src: firstVariant.src, type: firstVariant.type };\n };\n\n const videoSource = getVideoSource();\n\n return (\n
\n {tweet.video && videoSource && (\n \n \n \n )}\n {tweet.photos && (\n = 3 && \"grid-cols-2\"\n )}\n >\n {tweet.photos.map((photo, idx) => (\n \n ))}\n
\n )}\n
\n );\n};\n\ninterface TweetFooterProps {\n tweet: EnrichedTweet;\n showDate?: boolean;\n showLikeButton?: boolean;\n showCopyLink?: boolean;\n}\n\nconst TweetFooter = ({\n tweet,\n showDate = true,\n showLikeButton = true,\n showCopyLink = true,\n}: TweetFooterProps) => {\n const [isCopied, setIsCopied] = useState(false);\n\n const handleCopyLink = () => {\n navigator.clipboard.writeText(tweet.url).catch(() => {});\n setIsCopied(true);\n setTimeout(() => setIsCopied(false), 1500);\n };\n\n const showActions = showLikeButton || showCopyLink;\n\n if (!showDate && !showActions) return null;\n\n return (\n <>\n {showDate && (\n
\n \n {formatDate(tweet.created_at)}\n \n
\n )}\n {showActions && (\n
\n {showLikeButton && (\n \n \n \n \n \n \n \n {formatNumber(tweet.favorite_count)}\n \n \n )}\n {showCopyLink && (\n \n {isCopied ? (\n \n ) : (\n \n )}\n Copy link\n \n )}\n
\n )}\n \n );\n};\n\ninterface TweetContentProps {\n tweet: EnrichedTweet;\n className?: string;\n showDate?: boolean;\n showLikeButton?: boolean;\n showCopyLink?: boolean;\n}\n\nconst TweetContent = ({\n tweet,\n className,\n showDate,\n showLikeButton,\n showCopyLink,\n}: TweetContentProps) => {\n return (\n \n \n \n \n \n
\n );\n};\n\ninterface TweetProps {\n id: string;\n className?: string;\n showDate?: boolean;\n showLikeButton?: boolean;\n showCopyLink?: boolean;\n}\n\nexport function Tweet({\n id,\n className,\n showDate = true,\n showLikeButton = true,\n showCopyLink = true,\n}: TweetProps) {\n const { data: tweet, isLoading, error } = useTweet(id);\n\n if (isLoading) {\n return ;\n }\n\n if (error || !tweet) {\n return ;\n }\n\n // X's syndication API omits empty entity arrays, but react-tweet's\n // enrichTweet assumes they exist and throws \"n is not iterable\" otherwise.\n let enrichedTweet: EnrichedTweet;\n try {\n const entities = tweet.entities ?? {};\n enrichedTweet = enrichTweet({\n ...tweet,\n entities: {\n ...entities,\n hashtags: entities.hashtags ?? [],\n urls: entities.urls ?? [],\n user_mentions: entities.user_mentions ?? [],\n symbols: entities.symbols ?? [],\n },\n });\n } catch {\n return ;\n }\n\n return (\n \n );\n}\n", "type": "registry:component" } ], "type": "registry:component" }