Components
Loading preview...
Shared Files Panel Streamlined interface to manage and track file-sharing with contacts. Perfect for collaboration tools to keep shared access transparent and organized.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/shared-files// 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://i.pravatar.cc/150?u=a042581f4e29026024d',
fallback: 'SH',
},
{
id: '2',
name: 'Alberta Kimber',
email: 'realAlberta@gmail.com',
avatarUrl: 'https://i.pravatar.cc/150?u=a042581f4e29026704d',
fallback: 'AK',
},
{
id: '3',
name: 'Sigit Nurochman',
email: 'Rochman31@gmail.com',
avatarUrl: 'https://i.pravatar.cc/150?u=a04258114e29026702d',
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>
);
}