Social Share

Build a Social Share Component in React: that

• displays a series of social media share buttons along with a copy link feature.
• Opens social platform sharing dialogs in popup windows
• Include a copy-to-clipboard functionality for direct link sharing
• Use proper URL encoding for sharing parameters.

Each button opens the respective platform's sharing interface with the current page URL and predefined share text.

Requirements

Share Button Functionality

• Render buttons for social platforms
• When clicked, each button opens a new popup window to share the current page.
• Implement proper URL encoding using encodeURIComponent
• All sharing parameters must use encodeURIComponent() to handle special characters:

  const pageUrl = encodeURIComponent(window.location.href);
  const shareText = encodeURIComponent("Check this out!");

Copy Link Functionality

• Display current page URL in a read-only input field
• Implement one-click copy to clipboard using

    navigator.clipboard.writeText()

• Show temporary "Copied!" feedback message for 2 seconds

Action Buttons

You must implement the following sharing mechanisms:

1. Platform Sharing

• Opens sharing dialogs in popup windows (600x400px)
• Uses platform-specific sharing URLs with encoded parameters
• Includes proper aria-label attributes for accessibility

2. Copy to Clipboard

• Add a button labelled Copy Link.
• Copies current page URL to user's clipboard
• Show temporary "Copied!" feedback message for 2 seconds.
• Handles clipboard API asynchronously

3. URL Encoding

• Uses encodeURIComponent() for page URL and share text
• Ensures proper parameter formatting for sharing URLs
• Prevents URL breaking due to special characters

Requirements for Testing

• Assign a clear and descriptive aria-label to each button. For example:

  • "Facebook" for the Facebook button
  • "LinkedIn" for the LinkedIn button
  • "WhatsApp" for the WhatsApp button
  • "Telegram" for the Telegram button
  • "Reddit" for the Reddit button
  • "Email" for the Email button
  • "Discord" for the Discord button

Reference UI