Dashboard - Copy this React, Tailwind Component to your project
Design a React-based billing page that allows users to select between M-Pesa and PayPal as their preferred payment method. The page should include the following: User Interface Components: A title or heading for the billing page. Two buttons or selectable options for payment methods: one for M-Pesa and one for PayPal. Display relevant information for each payment option, such as payment method name and icons (e.g., M-Pesa and PayPal logos). A "Proceed to Payment" button that becomes enabled when a payment method is selected. State Management: Use React useState to track the selected payment method. Display a confirmation message when a payment method is selected. Logic for Handling Payments: Implement a function that handles the "Proceed to Payment" action, with placeholders for integrating M-Pesa and PayPal APIs. Include conditional rendering to display appropriate payment instructions based on the selected payment method. Additional Functionalities: Implement error handling and validation for user input (if applicable). Ensure that selecting a payment method dynamically updates the UI and provides feedback to the user. Include styling with Tailwind CSS or custom CSS classes to make the page visually appealing and responsive. Accessibility: Ensure that all interactive elements are accessible and keyboard navigable. Provide ARIA attributes where necessary to support screen readers. Optional Features: Integrate placeholder code to demonstrate where API calls for M-Pesa and PayPal would be made. Add loading states and display spinner indicators when initiating payment processing.