Tweet.tsx

The Tweet component fetches and displays a tweet as a card, using a tweet ID. It’s perfect for showcasing testimonials in a section, pulling tweet IDs from en.json. The component uses SvgFinder for the X logo and shadcn/ui components for styling. If the tweet cannot be fetched or the fetched data cannot be normalized, the component returns null instead of rendering a broken card.

Props

Usage

Pass a tweet ID to render a tweet card. Tweet IDs can be stored in en.json for a testimonials section.

import { Tweet } from '@/components/Tweet';

// Example data from en.json
const testimonials = [
  { tweetId: '1938617767948951952' },
  { tweetId: '1947845810533945433' },
];

// Render tweets in a testimonials section
<div>
  {testimonials.map((testimonial) => (
    <Tweet key={testimonial.tweetId} id={testimonial.tweetId} />
  ))}
</div>;

Sample JSON Structure

{
  "testimonialsSection": {
    "title": "Built for developers\nLoved by developers",
    "description": "See how Plainform is helping developers launch\nSaaS products faster and easier.",
    "testimonials": [
      { "tweetId": "1938617767948951952" },
      { "tweetId": "1947845810533945433" },
      { "tweetId": "1777327479230783534" }
    ]
  }
}

Notes

• Data Source: Tweet IDs are typically stored in en.json under testimonialsSection.
• Verification: Shows a BadgeCheck icon for blue-verified users.
• Guarded Rendering: Returns null when the tweet cannot be fetched, no tweet data is returned, or react-tweet cannot enrich the response.