Shared Files Panel Streamlined interface to manage and track file-sharing with contacts. Perfect for collaboration tools to keep shared access transparent and organized.
// demo.tsx
import { SharedFileCard, User } from '@/components/ui/shared-files';
// Mock data for demonstration purposes
const mockUsers: User[] = [
{
id: '1',
name: 'Simon Hempe',
email: 'no.simon@gmail.com',
avatarUrl: 'https://cdn.21st.dev/assets/mirror/42/420c64d5e90b2ff05fc182e3d8c3df40076440cb684d927efed247855775ea9b.jpg',
fallback: 'SH',
},
{
id: '2',
name: 'Alberta Kimber',
email: 'realAlberta@gmail.com',
avatarUrl: 'https://cdn.21st.dev/assets/mirror/ff/ff4b0fe2f7d11aff0d68f760e5fdcfeebf8b884c024ae24c9a6cf1d2edf76f49.jpg',
fallback: 'AK',
},
{
id: '3',
name: 'Sigit Nurochman',
email: 'Rochman31@gmail.com',
avatarUrl: 'https://cdn.21st.dev/assets/mirror/a3/a37358a09c532474e3246a94e5e5104b1b6b6907f83b44259509f8c776506120.jpg',
fallback: 'SN',
},
];
const fileUrl = 'odama.io/landing-page';
export default function SharedFileCardDemo() {
const handleSeeAll = () => {
alert('"See All" clicked!');
};
const handleUserClick = (userId: string) => {
const user = mockUsers.find((u) => u.id === userId);
alert(`Clicked on user: ${user?.name}`);
};
return (
<div className="flex min-h-[500px] w-full items-center justify-center bg-background p-4">
<SharedFileCard
title="Shared File"
users={mockUsers}
fileUrl={fileUrl}
onSeeAllClick={handleSeeAll}
onUserClick={handleUserClick}
/>
</div>
);
}