/
embedded-tweet.tsx
37 lines (35 loc) · 1.42 KB
/
embedded-tweet.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import type { Tweet } from '../api/index.js'
import type { TwitterComponents } from './types.js'
import { TweetContainer } from './tweet-container.js'
import { TweetHeader } from './tweet-header.js'
import { TweetInReplyTo } from './tweet-in-reply-to.js'
import { TweetBody } from './tweet-body.js'
import { TweetMedia } from './tweet-media.js'
import { TweetInfo } from './tweet-info.js'
import { TweetActions } from './tweet-actions.js'
import { TweetReplies } from './tweet-replies.js'
import { QuotedTweet } from './quoted-tweet/index.js'
import { enrichTweet } from '../utils.js'
import { useMemo } from 'react'
type Props = {
tweet: Tweet
components?: Omit<TwitterComponents, 'TweetNotFound'>
}
export const EmbeddedTweet = ({ tweet: t, components }: Props) => {
// useMemo does nothing for RSC but it helps when the component is used in the client (e.g by SWR)
const tweet = useMemo(() => enrichTweet(t), [t])
return (
<TweetContainer>
<TweetHeader tweet={tweet} components={components} />
{tweet.in_reply_to_status_id_str && <TweetInReplyTo tweet={tweet} />}
<TweetBody tweet={tweet} />
{tweet.mediaDetails?.length ? (
<TweetMedia tweet={tweet} components={components} />
) : null}
{tweet.quoted_tweet && <QuotedTweet tweet={tweet.quoted_tweet} />}
<TweetInfo tweet={tweet} />
<TweetActions tweet={tweet} />
<TweetReplies tweet={tweet} />
</TweetContainer>
)
}