Prompt file imported from aj-enns/ghcp-orchestration-guide (.github/prompts/react-component.prompt.md). Fill in {{componentName}} before use. Copyright stays with the author.

Generate a React Component

Create a new React functional component for this project. Follow all coding standards defined in .github/copilot-instructions.md.

Instructions

Generate the following files for the component named {{componentName}}:

1. src/components/{{componentName}}/index.tsx

• Use a named export
• Define a TypeScript interface for props (interface {{componentName}}Props)
• Include a placeholder for the component's primary content
• Apply Tailwind CSS classes for layout
• Add an appropriate ARIA role or label for accessibility

2. src/components/{{componentName}}/{{componentName}}.test.tsx

• Import from @testing-library/react
• Test that the component renders without crashing
• Test at least one user interaction or visual element using screen.getByRole
• Mock any props with realistic values

3. src/components/{{componentName}}/{{componentName}}.stories.tsx (optional)

• If the project uses Storybook, include a default story with common prop values

Context

#codebase