fix(blog): optimize component share logic, typography, and modal layouts

apps/web/src/components/TwitterEmbed.tsx

@@ -1,4 +1,7 @@
+'use client';
+
 import * as React from 'react';
+import { Tweet } from 'react-tweet';
 
 interface TwitterEmbedProps {
   tweetId: string;
@@ -7,45 +10,20 @@ interface TwitterEmbedProps {
   align?: 'left' | 'center' | 'right';
 }
 
-export async function TwitterEmbed({
+export 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 className={`not-prose ${className} ${alignmentClass} flex justify-center w-full my-8 min-h-[100px]`}>
+      <div className={theme === 'dark' ? 'dark' : 'light'}>
+        {/* We use our local API proxy to avoid CORS/404 issues with the public Vercel proxy */}
+        <Tweet id={tweetId} apiUrl={`/api/tweet/${tweetId}`} />
+      </div>
     </div>
   );
 }