Invite Card The InviteCard is a UI element designed to encourage users to invite others to a platform or community. It displays the number of remaining invites, shows a list of recently joined members with animated avatars, and provides clear call-to-action buttons for copying an invite link and sharing on social media.
// demo.tsx
import React from 'react';
import { InviteCard } from '@/components/ui/invite-card';
// Sample data for the demo
const sampleUsers = [
{ id: '1', name: 'Olivia Martin', avatarUrl: 'https://cdn.21st.dev/assets/mirror/dc/dcbf9043041b919ea03707a54aaf8bba2954d8ccbff2f9d3413d6a9d832c482c.png' },
{ id: '2', name: 'Jackson Lee', avatarUrl: 'https://cdn.21st.dev/assets/mirror/a8/a81ec3c7852f7d20e541c0083ca6b7ace3e239e925613b6f1d918bf1ba572270.png' },
{ id: '3', name: 'Isabella Nguyen', avatarUrl: 'https://cdn.21st.dev/assets/mirror/31/3115d8bbf2c714425b466397181076633d28d2c4e3a4063708f5fabf070a4c33.png' },
{ id: '4', name: 'William Kim', avatarUrl: 'https://cdn.21st.dev/assets/mirror/13/1324305b052779b3095718bb9718e18a5cfee8c9247adb744d55f45375e0385c.png' },
{ id: '5', name: 'Sofia Davis', avatarUrl: 'https://cdn.21st.dev/assets/mirror/d2/d2962b8be78466d1616281a08f7bfb88e4a81557324c29f97a36b7f017d7576e.png' },
];
const InviteCardDemo = () => {
// Demo handler functions
const handleCopy = () => {
console.log('Invite link copied to clipboard!');
// In a real app, you might show a toast notification here.
};
const handleShare = () => {
console.log('Sharing on LinkedIn...');
// In a real app, this would open a LinkedIn share dialog.
};
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-4">
<InviteCard
title="Invite to Community"
description={
<span>
You have <strong>5 invites</strong> left. Invite more people to get more.
</span>
}
users={sampleUsers}
totalJoined={13}
inviteLink="https://your-community.com/invite/a1b2c3d4"
onCopyLink={handleCopy}
onShareLinkedIn={handleShare}
/>
</div>
);
};
export default InviteCardDemo;