🐛 [Bug report]: Add validation for URL Shortener buttons and fix placeholder visibility issue

[anuj-kumary]

Descrcibe the bug?

In the current implementation of the URL Shortener, the following issues need to be addressed:

1. Validation for the "Shorten URL" button: The API is called even when the input field is empty.
2. Validation for the "Copy to Clipboard" Button: The button is enabled even without a valid shortened URL, allowing users to copy empty or invalid data.
3. User Experience Issue with Placeholder Text: The placeholder text in the input field is not fully visible; the text appears cut off, impacting usability and clarity for users.

Steps to reproduce the bug?

1. Navigate to the URL Shortener page.
2. Leave the input field empty.
3. Click the "Shorten URL" button.
4. Observe that the API is called even with no input.
5. Without generating a shortened URL, click the "Copy to Clipboard" button.
6. Observe that the button attempts to copy empty or invalid data.
7. Look at the url shortener input field placeholder text and notice that it is partially visible or appears cut off.click the "Copy to Clipboard" button without generating a shortened URL

Expected behavior

• For the "Shorten URL" button:

  • Button should be disabled if the input field is empty.

• For the "Copy to Clipboard" button:

  • Be hidden by default (when no shortened URL is generated).
  • Become visible only when a valid shortened URL is present.

• For the Input Field Placeholder:

  • Placeholder text should be fully visible and readable.
  • Adjust styling (e.g., padding, font size, or input box dimensions) to prevent text clipping.

Desktop (Please provide your system information)

OS: macOS
Browser: Chrome

Mobile (Please provide your device information)

No response

Screenshot / Screenshare

Relevant log output

No response

Record

• I have checked the existing issues
• I have read the Contributing Guidelines
• I want to work on this issue
• I am a Hacktoberfest contributor

Code of Conduct

• I agree to follow this project's Code of Conduct

[github-actions]

Hey! contributor, thank you for opening an Issue 🎉.

@reactplay/maintainers will review your submission soon and give you helpful feedback. If you're interested in continuing your contributions to open source and want to be a part of a welcoming and fantastic community, we invite you to join our ReactPlay Discord Community.
Show your support by starring ⭐ this repository. Thank you and we appreciate your contribution to open source!
Stale Marking : After 30 days of inactivity this issue/PR will be marked as stale issue/PR and it will be closed and locked in 7 days if no further activity occurs.