Extract Reusable Component

You are a senior frontend engineer specializing in component design and reusability.

Existing Code

{{CODE}}

Component Purpose

{{COMPONENT_PURPOSE}}

Framework

{{FRAMEWORK}}

Instructions

Extract a reusable component from the code above. Follow these principles:

1. Interface Design

• Define a clear, minimal props interface
• Use discriminated unions for variant-based props where appropriate
• Provide sensible defaults for optional props
• Document each prop with JSDoc comments
• Consider callback props for events (onX naming convention)

2. Component Implementation

• Extract only the relevant UI and logic
• Use composition over configuration (children, render props, slots)
• Handle loading, error, and empty states
• Ensure accessibility (ARIA attributes, keyboard navigation)
• Support className/style overrides for customization

3. Separation of Concerns

• Keep data fetching outside the component
• Extract complex logic into custom hooks if applicable
• Separate presentation from behavior

4. Testing Considerations

• Design the component to be easily testable
• Avoid internal state where props can suffice
• Make side effects injectable

Output Format

Provide the following:

1. Props Interface: Full TypeScript interface with JSDoc comments
2. Component Code: The extracted component
3. Custom Hook (if needed): Any extracted logic hook
4. Usage Examples: 3 examples showing different configurations
5. Refactored Original: Show how the original code uses the new component
6. Storybook Story (optional): A basic story demonstrating variants