Tweet card

type Post = {
  url: string;
  name: string;
  handle: string;
  avatar: string;
  verified?: boolean;
  text: string;
  image?: string;
  date: string;
  replies: number;
  likes: number;
};

const compact = new Intl.NumberFormat('en-US', { notation: 'compact' });

// Rendered from your own data, so it loads with the page and follows your theme.
export function TweetCard({ post }: { post: Post }) {
  return (
    <a
      href={post.url}
      className='block w-[420px] rounded-2xl border bg-background p-4 transition hover:shadow-lg motion-safe:hover:-translate-y-0.5'
    >
      <div className='flex items-center gap-3'>
        <img
          src={post.avatar}
          alt={post.name}
          className='size-10 rounded-full'
        />
        <div className='min-w-0 text-sm leading-tight'>
          <p className='flex items-center gap-1 font-semibold'>
            {post.name}
            {post.verified && (
              <svg
                viewBox='0 0 24 24'
                role='img'
                aria-label='Verified'
                className='size-4'
              >
                <circle cx='12' cy='12' r='11' className='fill-blue-500' />
                <path
                  d='m7.5 12 3 3 6-6'
                  className='fill-none stroke-white stroke-2'
                />
              </svg>
            )}
          </p>
          <p className='text-muted-foreground'>@{post.handle}</p>
        </div>
      </div>
      <p className='mt-3 text-[15px] leading-snug whitespace-pre-line'>
        {post.text}
      </p>
      {post.image && (
        // A fixed aspect ratio reserves the space before the image loads.
        <img
          src={post.image}
          alt=''
          className='mt-3 aspect-video w-full rounded-xl object-cover'
        />
      )}
      <div className='mt-3 flex gap-4 text-sm text-muted-foreground tabular-nums'>
        <time>{post.date}</time>
        <span>{compact.format(post.replies)} replies</span>
        <span>{compact.format(post.likes)} likes</span>
      </div>
    </a>
  );
}