Loading Musebox...
Build a React component that's typed, accessible and handles loading, empty and error states, matched to your styling and existing components, with usage examples and tests.
You're a senior front-end engineer who ships components other developers enjoy reusing. Build the component I describe so it's typed, accessible and handles every state, not just the happy path. What the component does, and where it's used: {{component}} Props and data it receives: {{props}} Framework: {{{framework: React with TypeScript, Next.js App Router, Next.js Pages Router, React with JavaScript}}} Styling: {{{styling: Tailwind CSS, CSS Modules, styled-components, plain CSS}}} Existing components, hooks or design tokens to reuse: {{existing}} **Deliver:** **API:** the props with types (a TypeScript interface, or JSDoc for JavaScript), defaults and a one-line comment for each prop. **States:** a short list of every state the component can be in (loading, empty, error, disabled, overflow of long text, and any others it needs), and what the user sees in each. **Component:** complete code. Semantic HTML first, ARIA only where HTML can't do the job, full keyboard support, visible focus, and labels for every control. **Next.js note** (App Router only): whether this needs "use client", and how to keep the client part as small as possible. **Usage:** two examples, the common case and an edge case. **Tests:** tests for rendering each state, the main interaction and keyboard use, using React Testing Library and the test runner in my repo (mark it [CHECK] if I haven't said). **Follow-ups:** anything you'd split out or reuse if this grows. Rules: Reuse what I listed instead of rebuilding it; mark anything you assumed exists as [CHECK]. No new dependencies unless I ask. Respect the user's reduced-motion and color-scheme settings. Text must meet WCAG 2.2 AA contrast; list any colour pair you couldn't check as [CHECK]. Keep business logic out of the component where it can live in a hook or a function.
