Card Variant

Classic Card-Style Modal

The Card variant provides a timeless, clean design with rounded corners, subtle shadows, and a bright yellow call-to-action button. Perfect for professional portfolios and standard use cases.

Live Preview

Installation

Generate the Card component:

bash
npx devfund@latest card

This creates components/devfund/CardPaymentQR.tsx

Basic Usage

tsx
import CardPaymentQR from '@/components/devfund/CardPaymentQR';

export default function SupportPage() {
  return (
    <div className="flex items-center justify-center min-h-screen">
      <CardPaymentQR username="yourname" />
    </div>
  );
}

Props

typescript
interface CardPaymentQRProps {
  username: string;  // Required: The username to fetch payment data for
}

States

Default State

Shows a bright yellow button with text "💛 Support {DisplayName}":

[💛 Support Zaid Rakhange]

Loading State

While fetching user data:

[⏳ Loading...]

Success State

Modal opens showing:

User display name
"Scan to support" subtitle
QR code in gray background
UPI ID below QR code
"Scan with any UPI app" instruction

Error State

If something goes wrong:

[⚠️ Error loading user]

Customization

Change Button Color

Edit the CardPaymentQR.tsx file and modify the button className:

tsx
// Change from yellow to blue
className="inline-flex items-center gap-2 bg-blue-400 hover:bg-blue-500 text-gray-900 font-semibold px-6 py-3 rounded-lg shadow-md hover:shadow-lg transition-all focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"

Change Button Text

Modify the button text in the return statement:

tsx
<button onClick={() => setIsOpen(true)} ...>
  💛 Contribute to {userData.displayName}
</button>

Change Modal Width

Edit the modal div className:

tsx
// Change from max-w-sm to max-w-lg or max-w-xl
className="bg-white rounded-2xl shadow-xl p-8 max-w-lg w-full relative"

Change QR Code Size

Modify the QR code container:

tsx
<div className="bg-gray-50 rounded-xl p-4 mb-4">
  <img
    src={userData.qrCodeUrl}
    alt={`QR code for ${userData.displayName}`}
    className="w-96 h-96"  // Changed from w-full h-auto
  />
</div>

Advanced Usage

With Custom Styling

tsx
import CardPaymentQR from '@/components/devfund/CardPaymentQR';

export default function BlogPost() {
  return (
    <section className="bg-linear-to-b from-white to-gray-50 py-16">
      <div className="max-w-2xl mx-auto px-4">
        <h2 className="text-3xl font-bold text-center mb-4">
          Support This Project
        </h2>
        <p className="text-center text-gray-600 mb-12">
          Your support helps me continue building and maintaining open-source tools.
        </p>
        
        <div className="flex justify-center">
          <CardPaymentQR username="yourname" />
        </div>
      </div>
    </section>
  );
}

Conditional Rendering

tsx
import CardPaymentQR from '@/components/devfund/CardPaymentQR';

export default function ProfilePage({ showSupport }: { showSupport: boolean }) {
  return (
    <div>
      <h1>My Profile</h1>
      
      {showSupport && (
        <div className="mt-12 pt-12 border-t">
          <CardPaymentQR username="yourname" />
        </div>
      )}
    </div>
  );
}

Accessibility

The Card variant includes:

✅ ARIA labels for buttons and modals
✅ Keyboard navigation (Escape to close modal)
✅ Focus management
✅ Screen reader support
✅ Semantic HTML

TypeScript

Full TypeScript support with exported types:

typescript
import CardPaymentQR from '@/components/devfund/CardPaymentQR';

interface CardPaymentQRProps {
  username: string;
}

interface UserData {
  displayName: string;
  upiId: string;
  qrCodeUrl: string;
}

Browser Support

✅ Chrome/Edge 90+
✅ Firefox 88+
✅ Safari 14+
✅ Mobile browsers (iOS Safari, Chrome Mobile)

Common Issues

Modal not closing

Ensure the close button click handler is not being prevented:

tsx
onClick={() => setIsOpen(false)}

QR code not displaying

Check that:

User profile exists in Devfund database
QR code was generated for the profile
The image URL is valid

Styles looking different

Make sure Tailwind CSS is properly configured and imported in your globals.css.