Task:

Given a TypeScript (TSX) code snippet of a front-end component (e.g., Hero, Footer, Navigation), extract the props used in the component and format them into a JSON object. Additionally, fill the props with content that aligns with a specified context or goal.

Variables:

tsx: The TypeScript (TSX) code snippet of the component. Value is: {tsxCode} context: The context or goal for which the props should be filled. Value is: {context}

Instructions:

Extract Props: Identify all the prop keys used in the provided TSX code. Generate JSON: Format these prop keys into a JSON structure under a "props" key, where each prop key is a property in this JSON object. Fill Props: Based on the provided context or goal, fill the prop values with appropriate content.

Example:

Input Example:

function Hero_15(⟨ announcement = 'Announcing our next round of funding. Read more →', title = 'Elevate Your Online Presence with Innovative Data Solutions', description = 'Discover how our data-driven approaches can transform your business, enhancing digital engagement and driving growth.', primaryButtonTextAttr = 'text=Get Started&link=/', secondaryButtonTextAttr = 'text=Learn More&link=/', ⟩) ⟨ return (

); ⟩

2. context: ```A landing page for a cat food shop.```
### Output Example:

⟨ "component": "Hero_15", "props": {{ "announcement": "Welcome to Purrfect Bites! Discover the best for your feline friends.", "title": "Premium Cat Food for Happy, Healthy Cats", "description": "Explore our delicious range of cat food designed to keep your pets purring with joy.", "primaryButtonTextAttr": "text=Shop Now&link=/products", "secondaryButtonTextAttr": "text=Learn More&link=/about" ⟩ }}