Share Dashboard A component for publishing a dashboard and managing team access. It features a scannable QR code, a shareable link, an invitation system, and an overview of team seat usage, all within a single responsive card.
import { ShareDashboard, InvitedUser } from '@/components/ui/dashboard-2'; // Adjust path as needed
// --- MOCK DATA FOR DEMONSTRATION ---
const mockUsers: InvitedUser[] = [
{
id: 'user-1',
name: 'Jack',
email: 'jack@untitledui.com',
avatarUrl: 'https://cdn.21st.dev/assets/mirror/02/0251acd094671a0b8a2b43fa57169d442989e5eac3845ba4e254d250fafc39b7.jpg',
status: 'sent',
},
{
id: 'user-2',
name: 'Sienna',
email: 'sienna@untitledui.com',
avatarUrl: 'https://cdn.21st.dev/assets/mirror/43/43d95f2384ae1da7afa92d96814b35d48e97402669d7a1d1333cbb5a0a5cbb85.jpg',
status: 'sent',
},
{
id: 'user-3',
name: 'Frankie',
email: 'frankie@untitledui.com',
avatarUrl: 'https://cdn.21st.dev/assets/mirror/be/be9239595e60710214efdbe4a52d6faa2b8986ec8b3140660821d90c1e9f8dc9.jpg',
status: 'sent',
},
{
id: 'user-4',
name: 'Matt',
email: 'matt@untitledui.com',
avatarUrl: 'https://cdn.21st.dev/assets/mirror/9b/9bbbadacfb7548763639a2ea9da7541cd8a9a4af577c12e96928865fcaa19a6c.jpg',
status: 'sent',
},
{
id: 'user-5',
name: 'Amélie Laurent',
email: 'amelie@untitledui.com',
// Using an external placeholder image service
avatarUrl: 'https://cdn.21st.dev/assets/mirror/0e/0e070896705960db5025f59cd13d62e3ab4289d8702d084c79e11234b7ee1eab.jpg',
status: 'accepted',
},
];
const teamSeatsData = {
used: 6,
total: 10,
};
// --- DEMO COMPONENT ---
export default function ShareDashboardDemo() {
// Placeholder functions to show how props would be used in a real application
const handleInvite = (email: string) => {
alert(`✅ Invitation sent to: ${email}\n(In a real app, you'd call your API here.)`);
};
const handleCopy = () => {
navigator.clipboard.writeText('sales.untitledui.com');
alert('📋 Dashboard URL copied to clipboard!');
};
const handleManage = () => {
alert('⚙️ Navigating to team management page...');
};
const handleAddDomain = () => {
alert('🔗 Opening custom domain settings...');
};
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-4 md:p-8">
<ShareDashboard
dashboardUrl="sales.untitledui.com"
qrCodeSrc="https://cdn.21st.dev/assets/mirror/3e/3e2cc9b7c90e06b0f88ec8290055284e8d05d755430b40cbf709bba4ee93750e.png"
invitedUsers={mockUsers}
teamSeats={teamSeatsData}
onInviteUser={handleInvite}
onCopyUrl={handleCopy}
onManageTeam={handleManage}
onAddCustomDomain={handleAddDomain}
/>
</div>
);
}