Social Media Reaction Widget

Build a simple social media post reaction widget that allows users to quickly react to a post using emoji reactions.

Requirements

Create a React component that displays a post with a reaction interface. The component should:

• Display a sample post text (you can hardcode this)
• Show a button labeled "React" that opens the reaction picker
• Display all reactions that have been added to the post below the post text
• Show each unique reaction emoji with a count of how many times it's been used
• Allow users to click on an existing reaction to add their own vote to it
• Initially show only a limited set of quick reactions (not the full emoji picker)
• Allow users to expand to browse the full emoji picker if they want more options
• Track which reaction was most recently selected

The widget should provide a smooth user experience typical of social media platforms.

Test Cases

• Clicking the "React" button opens the reaction picker in reactions mode @test
• Selecting a reaction from the picker adds it to the post's reactions list @test
• Clicking an existing reaction increments its count @test
• Multiple different reactions can be displayed simultaneously @test

Implementation

@generates

API

/**
 * Props for the SocialMediaPost component
 */
interface SocialMediaPostProps {
  postText: string;
}

/**
 * Social media post component with emoji reactions
 */
export function SocialMediaPost(props: SocialMediaPostProps): JSX.Element;

Dependencies { .dependencies }

emoji-picker-react { .dependency }

Provides the emoji reaction picker interface.