Marc Mintel
103d71851c
Some checks failed
🧪 CI (QA) / 🧪 Quality Assurance (push) Failing after 1m3s
- Restructure to pnpm monorepo (site moved to apps/web) - Integrate @mintel/tsconfig, @mintel/eslint-config, @mintel/husky-config - Implement Docker service architecture (Varnish, Directus, Gatekeeper) - Setup environment-aware Gitea Actions deployment
52 lines
1.9 KiB
TypeScript
52 lines
1.9 KiB
TypeScript
import * as React from 'react';
|
|
|
|
interface TwitterEmbedProps {
|
|
tweetId: string;
|
|
theme?: 'light' | 'dark';
|
|
className?: string;
|
|
align?: 'left' | 'center' | 'right';
|
|
}
|
|
|
|
export async function TwitterEmbed({
|
|
tweetId,
|
|
theme = 'light',
|
|
className = "",
|
|
align = 'center'
|
|
}: TwitterEmbedProps) {
|
|
let embedHtml = '';
|
|
|
|
try {
|
|
const oEmbedUrl = `https://publish.twitter.com/oembed?url=https://twitter.com/twitter/status/${tweetId}&theme=${theme}`;
|
|
const response = await fetch(oEmbedUrl);
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
embedHtml = data.html || '';
|
|
} else {
|
|
console.warn(`Twitter oEmbed failed for tweet ${tweetId}: ${response.status}`);
|
|
}
|
|
} catch (error) {
|
|
console.warn(`Failed to fetch Twitter embed for ${tweetId}:`, error);
|
|
}
|
|
|
|
const alignmentClass = align === 'left' ? 'mr-auto ml-0' : align === 'right' ? 'ml-auto mr-0' : 'mx-auto';
|
|
|
|
return (
|
|
<div className={`not-prose ${className} ${alignmentClass} w-4/5`} data-theme={theme} data-align={align}>
|
|
{embedHtml ? (
|
|
<div dangerouslySetInnerHTML={{ __html: embedHtml }} />
|
|
) : (
|
|
<div className="p-6 bg-slate-50 border border-dashed border-slate-200 rounded-lg text-center text-slate-600 text-sm flex flex-col items-center gap-2">
|
|
<svg className="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"/>
|
|
</svg>
|
|
<span>Unable to load tweet</span>
|
|
<a href={`https://twitter.com/i/status/${tweetId}`} target="_blank" rel="noopener noreferrer" className="text-slate-600 hover:text-slate-900 font-medium text-sm">
|
|
View on Twitter →
|
|
</a>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|