Components
Loading preview...
Manage Access Component This component provides a complete UI for managing user access to a resource. It's built to be highly reusable, controlled by props for users, access levels, and callback functions.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/manage-access-componentimport * as React from "react";
import { useState } from "react";
import { ManageAccess, User, Role } from "@/components/ui/manage-access-component"; // Adjust path as needed
// Mock Data
const initialUsers: User[] = [
{
id: "1",
name: "Hellen",
email: "helen@ui8.net",
avatarUrl: "https://i.pravatar.cc/150?u=helen",
role: "owner",
},
{
id: "2",
name: "Sam Dy",
email: "sam@ui8.net",
avatarUrl: "https://i.pravatar.cc/150?u=sam",
role: "editor",
},
{
id: "3",
name: "Ellie Joy",
email: "ellie@ui8.net",
avatarUrl: "https://i.pravatar.cc/150?u=ellie",
role: "editor",
},
];
const ManageAccessDemo = () => {
const [users, setUsers] = useState<User[]>(initialUsers);
// Handler for inviting a new user
const handleInvite = (email: string, role: Role) => {
const newUser: User = {
id: `${Date.now()}`,
name: email.split("@")[0],
email: email,
avatarUrl: `https://i.pravatar.cc/150?u=${email}`,
role: role,
};
setUsers((prevUsers) => [...prevUsers, newUser]);
console.log(`Invited ${email} with role: ${role}`);
};
// Handler for changing a user's role
const handleRoleChange = (userId: string, newRole: Role) => {
setUsers((prevUsers) =>
prevUsers.map((user) =>
user.id === userId ? { ...user, role: newRole } : user
)
);
console.log(`Changed role for user ${userId} to ${newRole}`);
};
// Handler for removing a user
const handleRemoveUser = (userId: string) => {
setUsers((prevUsers) => prevUsers.filter((user) => user.id !== userId));
console.log(`Removed user ${userId}`);
};
// Handler for changing general access level
const handleAccessChange = (level: "private" | "link") => {
console.log(`General access changed to: ${level}`);
};
return (
<div className="flex items-center justify-center min-h-screen bg-background p-4">
<ManageAccess
users={users}
fileUrl="https://brainwave.co/file/k373nH"
onInvite={handleInvite}
onRoleChange={handleRoleChange}
onRemoveUser={handleRemoveUser}
onAccessChange={handleAccessChange}
/>
</div>
);
};
export default ManageAccessDemo;