Update quoted tweet (#125)

* Updated quoted tweet components

* Export quoted tweet components

* Updated tweet media border

* Updated docs

apps/site/pages/twitter-theme/advanced.mdx

@@ -17,6 +17,7 @@ import {
  TweetMedia,
  TweetInfo,
  TweetActions,
+ QuotedTweet,
  enrichTweet,
 } from 'react-tweet'
 
@@ -35,6 +36,7 @@ export const MyTweet = ({ tweet: t, components }: Props) => {
  {tweet.mediaDetails?.length ? (
  <TweetMedia tweet={tweet} components={components} />
  ) : null}
+ {tweet.quoted_tweet && <QuotedTweet tweet={tweet.quoted_tweet} />}
  <TweetInfo tweet={tweet} />
  <TweetActions tweet={tweet} />
  {/* We're not including the `TweetReplies` component that adds the reply button */}

packages/react-tweet/src/api/types/tweet.ts

@@ -8,7 +8,7 @@ import type { TweetVideo } from './video.js'
 /**
  * Base tweet information shared by a tweet, a parent tweet and a quoted tweet.
  */
-interface TweetBase {
+export interface TweetBase {
  /**
  * Language code of the tweet. E.g "en", "es".
  */

packages/react-tweet/src/twitter-theme/components.tsx

@@ -15,3 +15,4 @@ export * from './tweet-media.js'
 export * from './tweet-not-found.js'
 export * from './tweet-replies.js'
 export * from './tweet-skeleton.js'
+export * from './quoted-tweet/index.js'

packages/react-tweet/src/twitter-theme/embedded-tweet.tsx

@@ -8,7 +8,7 @@ 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 { TweetQuotedTweet } from './tweet-quoted-tweet.js'
+import { QuotedTweet } from './quoted-tweet/index.js'
 import { enrichTweet } from '../utils.js'
 import { useMemo } from 'react'
 
@@ -28,7 +28,7 @@ export const EmbeddedTweet = ({ tweet: t, components }: Props) => {
  {tweet.mediaDetails?.length ? (
  <TweetMedia tweet={tweet} components={components} />
  ) : null}
- {tweet.quoted_tweet && <TweetQuotedTweet tweet={tweet.quoted_tweet} />}
+ {tweet.quoted_tweet && <QuotedTweet tweet={tweet.quoted_tweet} />}
  <TweetInfo tweet={tweet} />
  <TweetActions tweet={tweet} />
  <TweetReplies tweet={tweet} />

packages/react-tweet/src/twitter-theme/quoted-tweet/index.ts

@@ -0,0 +1,4 @@
+export * from './quoted-tweet.js'
+export * from './quoted-tweet-container.js'
+export * from './quoted-tweet-header.js'
+export * from './quoted-tweet-body.js'

packages/react-tweet/src/twitter-theme/quoted-tweet/quoted-tweet-body.module.css

@@ -0,0 +1,9 @@
+.root {
+ font-size: var(--tweet-quoted-body-font-size);
+ font-weight: var(--tweet-quoted-body-font-weight);
+ line-height: var(--tweet-quoted-body-line-height);
+ margin: var(--tweet-quoted-body-margin);
+ overflow-wrap: break-word;
+ white-space: pre-wrap;
+ padding: 0 0.75rem;
+}

packages/react-tweet/src/twitter-theme/quoted-tweet/quoted-tweet-body.tsx

@@ -0,0 +1,12 @@
+import type { EnrichedQuotedTweet } from '../../utils.js'
+import s from './quoted-tweet-body.module.css'
+
+type Props = { tweet: EnrichedQuotedTweet }
+
+export const QuotedTweetBody = ({ tweet }: Props) => (
+ <p className={s.root}>
+ {tweet.entities.map((item, i) => (
+ <span key={i} dangerouslySetInnerHTML={{ __html: item.text }} />
+ ))}
+ </p>
+)

packages/react-tweet/src/twitter-theme/quoted-tweet/quoted-tweet-container.module.css

@@ -0,0 +1,19 @@
+.root {
+ width: 100%;
+ overflow: hidden;
+ border: var(--tweet-border);
+ border-radius: 12px;
+ margin: var(--tweet-quoted-container-margin);
+ transition-property: background-color, box-shadow;
+ transition-duration: 0.2s;
+ cursor: pointer;
+}
+
+.root:hover {
+ background-color: var(--tweet-quoted-bg-color-hover);
+}
+
+.article {
+ position: relative;
+ box-sizing: inherit;
+}

packages/react-tweet/src/twitter-theme/quoted-tweet/quoted-tweet-container.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import type { EnrichedQuotedTweet } from '../../utils.js'
+import s from './quoted-tweet-container.module.css'
+
+type Props = { tweet: EnrichedQuotedTweet; children: ReactNode }
+
+export const QuotedTweetContainer = ({ tweet, children }: Props) => (
+ <div
+ className={s.root}
+ onClick={(e) => {
+ e.preventDefault()
+ window.open(tweet.url, '_blank')
+ }}
+ >
+ <article className={s.article}>{children}</article>
+ </div>
+)

packages/react-tweet/src/twitter-theme/quoted-tweet/quoted-tweet-header.module.css

@@ -0,0 +1,38 @@
+.header {
+ display: flex;
+ padding: 0.75rem 0.75rem 0 0.75rem;
+ line-height: var(--tweet-header-line-height);
+ font-size: var(--tweet-header-font-size);
+ white-space: nowrap;
+ overflow-wrap: break-word;
+ overflow: hidden;
+}
+
+.avatar {
+ position: relative;
+ height: 20px;
+ width: 20px;
+}
+
+.avatarSquare {
+ border-radius: 4px;
+}
+
+.author {
+ display: flex;
+ margin: 0 0.5rem;
+}
+
+.authorText {
+ font-weight: 700;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+}
+
+.username {
+ color: var(--tweet-font-color-secondary);
+ text-decoration: none;
+ text-overflow: ellipsis;
+ margin-left: 0.125rem;
+}

packages/react-tweet/src/twitter-theme/tweet-quoted-tweet-header.tsx → packages/react-tweet/src/twitter-theme/quoted-tweet/quoted-tweet-header.tsx

@@ -1,14 +1,12 @@
 import clsx from 'clsx'
-import { AvatarImg } from './avatar-img.js'
-import s from './tweet-quoted-tweet-header.module.css'
-import type { EnrichedQuotedTweet } from '../utils'
-import { TweetAuthorVerifiedBadge } from './tweet-author-verified-badge.js'
+import { AvatarImg } from '../avatar-img.js'
+import s from './quoted-tweet-header.module.css'
+import type { EnrichedQuotedTweet } from '../../utils.js'
+import { VerifiedBadge } from '../verified-badge.js'
 
-type Props = {
- tweet: EnrichedQuotedTweet
-}
+type Props = { tweet: EnrichedQuotedTweet }
 
-export const TweetQuotedTweetHeader = ({ tweet }: Props) => {
+export const QuotedTweetHeader = ({ tweet }: Props) => {
  const { user } = tweet
 
  return (
@@ -37,7 +35,7 @@ export const TweetQuotedTweetHeader = ({ tweet }: Props) => {
  <div className={s.authorText}>
  <span title={user.name}>{user.name}</span>
  </div>
- <TweetAuthorVerifiedBadge className={s.authorVerified} user={user} />
+ <VerifiedBadge user={user} />
  <div className={s.username}>
  <span title={`@${user.screen_name}`}>@{user.screen_name}</span>
  </div>

packages/react-tweet/src/twitter-theme/quoted-tweet/quoted-tweet.tsx

@@ -0,0 +1,15 @@
+import type { EnrichedQuotedTweet } from '../../utils.js'
+import { QuotedTweetContainer } from './quoted-tweet-container.js'
+import { QuotedTweetHeader } from './quoted-tweet-header.js'
+import { QuotedTweetBody } from './quoted-tweet-body.js'
+import { TweetMedia } from '../tweet-media.js'
+
+type Props = { tweet: EnrichedQuotedTweet }
+
+export const QuotedTweet = ({ tweet }: Props) => (
+ <QuotedTweetContainer tweet={tweet}>
+ <QuotedTweetHeader tweet={tweet} />
+ <QuotedTweetBody tweet={tweet} />
+ {tweet.mediaDetails?.length ? <TweetMedia quoted tweet={tweet} /> : null}
+ </QuotedTweetContainer>
+)

packages/react-tweet/src/twitter-theme/theme.css

@@ -11,13 +11,12 @@
  --tweet-body-line-height: 1.5rem;
  --tweet-body-margin: 0;
 
- /* Quoted */
+ /* Quoted Tweet */
+ --tweet-quoted-container-margin: 0.75rem 0;
  --tweet-quoted-body-font-size: 0.938rem;
  --tweet-quoted-body-font-weight: 400;
  --tweet-quoted-body-line-height: 1.25rem;
  --tweet-quoted-body-margin: 0.25rem 0 0.75rem 0;
- --tweet-quoted-container-margin: 0.75rem 0;
-
 
  /* Info */
  --tweet-info-font-size: 0.9375rem;
@@ -60,6 +59,7 @@
  --tweet-font-color-secondary: rgb(83, 100, 113);
  --tweet-bg-color: #fff;
  --tweet-bg-color-hover: rgb(247, 249, 249);
+ --tweet-quoted-bg-color-hover: rgba(0, 0, 0, 0.03);
  --tweet-color-blue-primary: rgb(29, 155, 240);
  --tweet-color-blue-primary-hover: rgb(26, 140, 216);
  --tweet-color-blue-secondary: rgb(0, 111, 214);
@@ -88,6 +88,7 @@
  --tweet-font-color-secondary: rgb(139, 152, 165);
  --tweet-bg-color: rgb(21, 32, 43);
  --tweet-bg-color-hover: rgb(30, 39, 50);
+ --tweet-quoted-bg-color-hover: rgba(255, 255, 255, 0.03);
  --tweet-color-blue-primary: rgb(29, 155, 240);
  --tweet-color-blue-primary-hover: rgb(26, 140, 216);
  --tweet-color-blue-secondary: rgb(107, 201, 251);

packages/react-tweet/src/twitter-theme/tweet-header.tsx

@@ -3,7 +3,7 @@ import type { EnrichedTweet } from '../utils.js'
 import type { TwitterComponents } from './types.js'
 import { AvatarImg } from './avatar-img.js'
 import s from './tweet-header.module.css'
-import { TweetAuthorVerifiedBadge } from './tweet-author-verified-badge.js'
+import { VerifiedBadge } from './verified-badge.js'
 
 type Props = {
  tweet: EnrichedTweet
@@ -49,7 +49,7 @@ export const TweetHeader = ({ tweet, components }: Props) => {
  <div className={s.authorLinkText}>
  <span title={user.name}>{user.name}</span>
  </div>
- <TweetAuthorVerifiedBadge user={user} className={s.authorVerified} />
+ <VerifiedBadge user={user} className={s.authorVerified} />
  </a>
  <div className={s.authorMeta}>
  <a

packages/react-tweet/src/twitter-theme/tweet-media.module.css

@@ -1,13 +1,11 @@
 .root {
  margin-top: 0.75rem;
- border: var(--tweet-border);
- border-radius: 12px;
  overflow: hidden;
  position: relative;
 }
-.rootQuoted {
- border: none;
- border-radius: 0;
+.rounded {
+ border: var(--tweet-border);
+ border-radius: 12px;
 }
 .mediaWrapper {
  display: grid;

packages/react-tweet/src/twitter-theme/tweet-media.tsx

@@ -1,8 +1,8 @@
 import { Fragment } from 'react'
 import clsx from 'clsx'
 import {
- type EnrichedQuotedTweet,
  type EnrichedTweet,
+ type EnrichedQuotedTweet,
  getMediaUrl,
 } from '../utils.js'
 import { MediaDetails } from '../api/index.js'
@@ -39,7 +39,7 @@ export const TweetMedia = ({ tweet, components, quoted }: Props) => {
  const Img = components?.MediaImg ?? MediaImg
 
  return (
- <div className={clsx(s.root, quoted && s.rootQuoted)}>
+ <div className={clsx(s.root, !quoted && s.rounded)}>
  <div
  className={clsx(
  s.mediaWrapper,