Components
Loading preview...
ShareCard A card component to manage and share access to a resource, such as a folder. It allows inviting new users with specific roles and modifying the roles of existing users.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/share-card"use client";
import * as React from "react";
import { ShareCard, User } from "@/components/ui/share-card";
// Mock user data based on the provided image
const initialUsers: User[] = [
{
id: "1",
name: "Heisenberg",
email: "walterwhite@gmail.com",
avatar: "https://i.pravatar.cc/150?u=heisenberg",
role: "Owner",
},
{
id: "2",
name: "Jesse Pinkman",
email: "bitch@gmail.com",
avatar: "https://i.pravatar.cc/150?u=jesse",
role: "Viewer",
},
{
id: "3",
name: "Gustavo Fring",
email: "thechickenman@gmail.com",
avatar: "https://i.pravatar.cc/150?u=gus",
role: "Viewer",
},
{
id: "4",
name: "Saul Goodman",
email: "bettercallsaul@gmail.com",
avatar: "https://i.pravatar.cc/150?u=saul",
role: "Viewer",
},
{
id: "5",
name: "Mike Ehrmantraut",
email: "poppop@gmail.com",
avatar: "https://i.pravatar.cc/150?u=mike",
role: "Viewer",
},
];
export default function ShareCardDemo() {
const [users, setUsers] = React.useState<User[]>(initialUsers);
// Handler for role changes
const handleRoleChange = (userId: string, newRole: "Editor" | "Viewer") => {
setUsers((prevUsers) =>
prevUsers.map((user) =>
user.id === userId ? { ...user, role: newRole } : user
)
);
console.log(`User ${userId} role changed to ${newRole}`);
};
// Handler for inviting new users
const handleInvite = (email: string, role: "Editor" | "Viewer") => {
const newUser: User = {
id: (users.length + 1).toString(),
name: "New Member",
email,
avatar: `https://i.pravatar.cc/150?u=${email}`,
role,
};
setUsers((prevUsers) => [...prevUsers, newUser]);
console.log(`Invited ${email} with role ${role}`);
};
return (
<div className="flex items-center justify-center h-full p-4 bg-background">
<ShareCard
folderName="Meth Lab"
itemCount={159}
users={users}
onRoleChange={handleRoleChange}
onInvite={handleInvite}
/>
</div>
);
}