Client Tweet Card

1"use client"
2 
3import { useTweet, type TweetProps } from "react-tweet"
4 
5import {
6  MagicTweet,
7  TweetNotFound,
8  TweetSkeleton,
9} from "@/registry/magicui/tweet-card"
10 
11export const ClientTweetCard = ({
12  id,
13  apiUrl,
14  fallback = <TweetSkeleton />,
15  components,
16  fetchOptions,
17  onError,
18  ...props
19}: TweetProps & { className?: string }) => {
20  const { data, error, isLoading } = useTweet(id, apiUrl, fetchOptions)
21 
22  if (isLoading) return fallback
23  if (error || !data) {
24    const NotFound = components?.TweetNotFound ?? TweetNotFound
25    return <NotFound error={onError ? onError(error) : error} />
26  }
27 
28  return <MagicTweet tweet={data} {...props} />
29}