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.
"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://cdn.21st.dev/assets/mirror/42/420c64d5e90b2ff05fc182e3d8c3df40076440cb684d927efed247855775ea9b.jpg",
role: "Owner",
},
{
id: "2",
name: "Jesse Pinkman",
email: "bitch@gmail.com",
avatar: "https://cdn.21st.dev/assets/mirror/4f/4fcf7f925f8c23881f850d2c242e643915c1141e6e23e8cace997c603267198c.jpg",
role: "Viewer",
},
{
id: "3",
name: "Gustavo Fring",
email: "thechickenman@gmail.com",
avatar: "https://cdn.21st.dev/assets/mirror/a7/a785c3eae0f7dc7d4cdd9d8679863c2239d5627711a3a3485ce99005a9c3560d.jpg",
role: "Viewer",
},
{
id: "4",
name: "Saul Goodman",
email: "bettercallsaul@gmail.com",
avatar: "https://cdn.21st.dev/assets/mirror/9a/9a3f3f88dac2ceb807e98d4cbe99acc9813da6d0ce2859b1cf026747727e1667.jpg",
role: "Viewer",
},
{
id: "5",
name: "Mike Ehrmantraut",
email: "poppop@gmail.com",
avatar: "https://cdn.21st.dev/assets/mirror/c8/c8fff9320a42977b719bac79df70b93920bcb0e5d6cdfe3a9eccf0b700a6af08.jpg",
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>
);
}