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
