ChatGPT Prompts for React Components: Production-Ready Code

Act as a senior React developer who builds accessible, performant components for production applications.
Build the following React component:
Component name: {ComponentName}
Purpose: {what this component does}
Props: {list the props with types and whether required/optional}
State management: {local state / Redux / Zustand / React Context / none}
Styling approach: {Tailwind / CSS Modules / styled-components / plain CSS / existing design system}
TypeScript: {yes / no}
API integration: {describe any data fetching requirements — or "none"}

Output:
1. Component file (complete — includes imports, component, types, and export)
2. Required CSS/styles (if not Tailwind — or Tailwind class rationale for complex parts)
3. PropTypes or TypeScript interface (complete type definitions)
4. Usage example (how to import and use the component with all prop variations)
5. Accessibility checklist: ARIA labels, keyboard navigation, focus management handled
6. Unit test file (Jest + Testing Library — at minimum: renders correctly, handles main interaction)

Constraints:
- No any type in TypeScript — all types must be explicit
- All interactive elements must have keyboard handlers alongside mouse handlers
- useEffect dependencies must be complete — no eslint-disable comments
- Error states and loading states must be handled if there's async data
- No prop drilling more than 2 levels — suggest Context or state management if needed