Copy to Clipboard

Create a simple and user-friendly React component that allows users to copy a text input to the clipboard with a single click.

Requirements

• Includes a text input field for the user to enter any message.

• A "Copy" button allows the user to copy the text from the input field to their clipboard.

• When the text is successfully copied:

  • A "Copied!" message should appear temporarily for 2 seconds.

• If the input field is empty and the user clicks "Copy":

  • An error message should be displayed indicating that the input cannot be empty.

Testing Requirements

Use the following data-testid attributes to make the component easily testable:

• input-field → applied to the <input /> element.
• copy-button → applied to the "Copy" <button />.
• copied-message → applied to the temporary "Copied!" confirmation message.
• error-message → applied to the error message shown when input is empty.

Reference UI