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,