Tweet

Build a static Tweet card — the layout of a single post as it appears in a timeline. There's no interactivity to wire up: the whole exercise is structure and layout. You'll lay out the classic two-column shape — a round avatar on the left, and a content column on the right holding the author line, the post text, and a row of action buttons (reply, retweet, like, views). This is the bread-and-butter of UI work: turning a design into clean, semantic markup that lines up correctly.

Signature

// A self-contained, presentational component. No props, no state.
function App(): JSX.Element;

Render one tweet with an avatar, an author line, body text, and an action row.

Examples

┌────────────────────────────────────────────┐
│ (AL)  Ada Lovelace  @ada · 2h              │
│       Just shipped my first component in    │
│       four frameworks…                      │
│       reply 24   retweet 18   like 312      │
└────────────────────────────────────────────┘

Layout shape:
[ avatar ][ body: header line / text / actions ]
   fixed width        flexes to fill the rest

Notes

• Two columns. The avatar is a fixed-width column; the body takes the remaining space. Flexbox (display: flex) with the avatar non-shrinking and the body flexing is the natural fit.
• Semantic markup. Wrap the card in an <article>; the author line and actions are just rows inside it. Don't reach for a <table> or absolute positioning.
• Static only. No like/retweet behaviour, no state — this is purely the presentational layout. (Making the like button work is the Like Button exercise.)