Fix TweetHeader to use simple img tag

packages/react-static-tweets/src/twitter-layout/components/next.ts

@@ -7,7 +7,7 @@ import { Ul, Ol, Li } from './lists'
 import { Table, Th, Td } from './table'
 import { Img } from './media.next'
 import { Mention, Hashtag, Cashtag, Emoji, Poll } from './twitter'
-import Tweet from './tweet/tweet'
+import Tweet from './tweet/tweet.next'
 import EmbeddedTweet from './embedded-tweet'
 
 export default {

packages/react-static-tweets/src/twitter-layout/components/tweet/tweet-header.next.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import Image from 'next/image'
+
+export default function TweetHeader({ tweet }) {
+  const authorUrl = `https://twitter.com/${tweet.username}`
+  const tweetUrl = `https://twitter.com/${tweet.username}/status/${tweet.id}`
+  const avatar = tweet.avatar.normal
+
+  return (
+    <div className='static-tweet-header'>
+      <a
+        href={authorUrl}
+        className='static-tweet-header-avatar'
+        target='_blank'
+        rel='noopener noreferrer'
+      >
+        <Image
+          className='static-tweet-header-rounded'
+          src={avatar}
+          alt={tweet.name}
+          height={36}
+          width={36}
+        />
+      </a>
+
+      <a
+        href={authorUrl}
+        className='static-tweet-header-author'
+        target='_blank'
+        rel='noopener noreferrer'
+      >
+        <span className='static-tweet-header-name' title={tweet.name}>
+          {tweet.name}
+        </span>
+
+        <span
+          className='static-tweet-header-username'
+          title={`@${tweet.username}`}
+        >
+          @{tweet.username}
+        </span>
+      </a>
+
+      <a
+        href={tweetUrl}
+        className='static-tweet-header-brand'
+        target='_blank'
+        rel='noopener noreferrer'
+      >
+        <div
+          className='static-tweet-header-icon-twitter'
+          title='View on Twitter'
+          role='img'
+        />
+      </a>
+    </div>
+  )
+}

packages/react-static-tweets/src/twitter-layout/components/tweet/tweet-header.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import Image from 'next/image'
 
 export default function TweetHeader({ tweet }) {
   const authorUrl = `https://twitter.com/${tweet.username}`
@@ -14,7 +13,7 @@ export default function TweetHeader({ tweet }) {
         target='_blank'
         rel='noopener noreferrer'
       >
-        <Image
+        <img
           className='static-tweet-header-rounded'
           src={avatar}
           alt={tweet.name}

packages/react-static-tweets/src/twitter-layout/components/tweet/tweet.next.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import TweetHeader from './tweet-header'
+import TweetInfo from './tweet-info'
+
+const TweetContext = React.createContext<any>({})
+
+export const useTweet = () => React.useContext(TweetContext)
+
+export default function Tweet({ children, data }) {
+  return (
+    <div className='static-tweet-body'>
+      <blockquote className='static-tweet-body-blockquote'>
+        <TweetHeader tweet={data} />
+        <TweetContext.Provider value={data}>{children}</TweetContext.Provider>
+        <TweetInfo tweet={data} />
+      </blockquote>
+    </div>
+  )
+}