40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
import React from 'https://esm.sh/react@18.2.0?deno-std=0.140.0'
|
|
import type { FormattedTweet } from './types.ts'
|
|
|
|
/**
|
|
* Supports plain text, images, quote tweets.
|
|
*
|
|
* Needs support for images, GIFs, and replies maybe?
|
|
* Styles use !important to override Tailwind .prose inside MDX.
|
|
*/
|
|
export default function Tweet({
|
|
id,
|
|
text,
|
|
author,
|
|
media,
|
|
created_at,
|
|
public_metrics,
|
|
referenced_tweets,
|
|
}: FormattedTweet) {
|
|
const authorUrl = `https://twitter.com/${author.username}`
|
|
const likeUrl = `https://twitter.com/intent/like?tweet_id=${id}`
|
|
const retweetUrl = `https://twitter.com/intent/retweet?tweet_id=${id}`
|
|
const replyUrl = `https://twitter.com/intent/tweet?in_reply_to=${id}`
|
|
const tweetUrl = `https://twitter.com/${author.username}/status/${id}`
|
|
const createdAt = new Date(created_at)
|
|
|
|
const formattedText = text.replace(/https:\/\/[\n\S]+/g, '').replace('&', '&')
|
|
const quoteTweet = referenced_tweets && referenced_tweets.find((t) => t.type === 'quoted')
|
|
|
|
return (
|
|
<div tw="flex">
|
|
<div tw="flex flex-col md:flex-row w-full py-12 px-4 md:items-center justify-between p-8">
|
|
<h2 tw="flex flex-col text-3xl sm:text-4xl font-bold tracking-tight text-left">
|
|
<span>{formattedText}</span>
|
|
<span tw="text-gray-300">{`- @${author.username}`}</span>
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|