Character Counter

Build a <textarea> with a live character counter as a single React component. A message box capped at 200 characters shows 0 / 200 and updates on every keystroke, and once you get within 20 of the limit the counter turns red to warn you. It's a classic controlled-input exercise: one piece of state (the text) drives both the box and everything derived from it.

Task

The starter App.tsx renders the textarea in its empty state with the counter reading 0 / 200. Make it live:

1. Hold the text. Track the textarea's value with useState('').
2. Control the input. Pass value={text} and update it in onChange so the text is a controlled input.
3. Reflect the length. Derive count = text.length, show count / 200 in the counter, and add the near class when count >= 180 so it turns red.

Examples

• The page loads with an empty box and a grey 0 / 200 below it. Typing "hello" updates the counter to 5 / 200.
• At 180 characters the counter flips from grey to red (#ef4444) as an at-the-limit warning; deleting back under 180 turns it grey again.
• The maxlength="200" on the textarea hard-stops input at 200, so the counter never exceeds 200 / 200.

Notes

• One source of truth. The number and the warning colour both derive from text.length — don't track a separate count state that can drift.
• maxLength is the hard stop; the counter is the soft warning. The attribute prevents overflow; the red colour is a courtesy that starts 20 characters early.
• Controlled input. Wiring value + onChange keeps React's state and the DOM in sync — that's what lets you read text.length reliably.
• Styling (dark theme, textarea, counter, red modifier) is already in styles.css; focus on the state.