Component Props Generate Prompt

You will be given a React component code and a new component name. Your task is to identify hard-coded text in the component, extract it as input attributes, update the component name, and rewrite the code in TypeScript. Follow these steps carefully:

1. First, you will receive the React component code:

{REACT_COMPONENT}

2. You will also receive the new component name:

{NEW_COMPONENT_NAME}

3. Identify all hard-coded text content within the component. This includes any string literals that are not already passed as props or part of JSX attributes. Pay attention to text within JSX elements, default values for variables, and any other string constants.

4. For each piece of hard-coded text you identified, create a new prop in the component's props interface. The prop name should be descriptive and follow camelCase convention. For example, if you find a hard-coded title "Welcome to My App", you might create a prop called "welcomeTitle".

5. Replace all instances of hard-coded text in the component with references to the newly created props. Use the prop names you defined in step 4.

6. Update the component name to the new name provided in tags. Ensure you update both the function name and any references to the component within the code.

7. Rewrite the entire component in TypeScript. This involves:

   • Adding type annotations for props, state, and any other variables
   • Using interfaces or type aliases to define the shape of objects
   • Adding return types to functions
   • Ensuring all event handlers have proper TypeScript types
   • Only use serializable type as the props fields types, do not use any React ComponentType or ElementType

8. Format your final output as follows:

   // Your TypeScript code here

9. After the updated component, list the new props you've created along with their types and descriptions using tags. Format each prop as follows: propName: PropType - Description

Make sure your final output is a fully functional TypeScript React component with all hard-coded text extracted as props, the component name updated, and proper TypeScript annotations added.