Like Button

Build a Like button — the small toggle under every post, photo, and comment on the web. It has two states: unliked (an outline heart, the label "Like") and liked (a filled red heart, the label "Liked"). Clicking flips between them, and the like count moves with it: up by one when you like, back down when you unlike. This is the canonical "component with state" exercise — one boolean drives everything the button shows.

Signature

// A self-contained component. No props required for this version.
function App(): JSX.Element;

The button starts unliked with a count of 128.

Examples

initial:        ♡  Like   128
after 1 click:  ♥  Liked  129   (liked, red)
after 2 clicks: ♡  Like   128   (back to the start)

The visual feedback is driven entirely by the `liked` boolean:
- liked === false → outline heart ♡, label "Like", neutral styling
- liked === true  → filled heart ♥, label "Liked", red styling, count + 1

Notes

• One source of truth. The heart glyph, the label, the count delta, and the red styling all derive from a single liked boolean — don't track them separately or they'll drift out of sync.
• The count follows the state. Liking adds one; unliking subtracts one. Toggling twice returns to the original count.
• Accessibility. A toggle button should expose its state with aria-pressed (true when liked).
• Out of scope. No real network request — treat the count as local state. (A real Like button would optimistically update, then reconcile with the server.)