Add DonateButton component with PayPal support

Introduced a new DonateButton component that displays a styled "Donate" button with a PayPal icon and opens a PayPal donation link in a new tab using JS interop. Added responsive CSS for the component. Integrated the DonateButton into Home.razor below the feature list to encourage user support. Updated _Imports.razor to make the component available app-wide.
2025-12-14 12:21:21 +01:00
parent e361f26cdf
commit 695a0424bc
4 changed files with 135 additions and 0 deletions
@@ -0,0 +1,23 @@
+@inject IJSRuntime JSRuntime
+
+<div class="donate-section">
+    <div class="donate-container">
+        <p class="donate-text">Support TuneRipper development</p>
+        <button class="donate-btn" @onclick="OpenPayPalDonation">
+            <span class="paypal-icon">
+                <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+                    <path d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.288-.017c-.618-.017-1.288.017-2.022.17-.734.153-1.288.323-1.663.493v-.493c0-.823-.17-1.52-.51-2.087-.34-.567-.85-1.020-1.53-1.36-.68-.34-1.503-.51-2.47-.51H7.076c-.34 0-.68.17-.85.51-.17.34-.255.68-.255 1.02v.68l.425 2.87h2.19c2.53 0 4.31-.85 5.34-2.55.51-.85.765-1.7.765-2.55z"/>
+                </svg>
+            </span>
+            <span>Donate</span>
+        </button>
+    </div>
+</div>
+
+@code {
+    private async Task OpenPayPalDonation()
+    {
+        var paypalUrl = "https://paypal.me/vrbaone";
+        await JSRuntime.InvokeVoidAsync("open", paypalUrl, "_blank");
+    }
+}
@@ -0,0 +1,109 @@
+.donate-section {
+    margin-top: 25px;
+    display: flex;
+    justify-content: center;
+}
+
+.donate-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+}
+
+.donate-header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    margin-bottom: 12px;
+}
+
+.donate-icon {
+    font-size: 1rem;
+}
+
+.donate-title {
+    color: white;
+    margin: 0;
+    font-size: 1.2rem;
+    font-weight: 600;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.donate-description {
+    color: rgba(255, 255, 255, 0.9);
+    margin: 0 0 16px 0;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.donate-btn {
+    background: #0070ba;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 8px;
+    font-size: 0.9rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    box-shadow: 0 2px 4px rgba(0, 112, 186, 0.2);
+}
+
+.donate-btn:hover {
+    background: #005ea6;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0, 112, 186, 0.3);
+}
+
+.donate-btn:active {
+    transform: translateY(0);
+}
+
+.paypal-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.donate-note {
+    color: rgba(255, 255, 255, 0.8);
+    font-style: italic;
+}
+
+/* Responsive Design */
+@media (max-width: 640px) {
+    .donate-container {
+        padding: 16px;
+        margin: 0 10px;
+    }
+    
+    .donate-title {
+        font-size: 1.1rem;
+    }
+    
+    .donate-description {
+        font-size: 0.8rem;
+    }
+    
+    .donate-btn {
+        padding: 8px 16px;
+        font-size: 0.85rem;
+    }
+    
+    .donate-header {
+        flex-direction: column;
+        gap: 8px;
+    }
+    
+    .paypal-icon svg {
+        width: 14px;
+        height: 14px;
+    }
+}
@@ -185,6 +185,8 @@
                <span>Completely Free</span>
            </div>
        </div>
+        
+        <DonateButton />
    </div>
 </div>

@@ -10,5 +10,6 @@
@using TuneRipper.Layout
@using TuneRipper.Services
@using TuneRipper.Extensions
+@using TuneRipper.Components
@using TuneRipper.Shared.Models
@using TuneRipper.Shared.Configuration