Manage Access Component

Component 121

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Manage Access Component to your project and fits it to your theme.

Code

How Manage Access Component is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * 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://cdn.21st.dev/assets/mirror/75/75778ce28da1e1b2265c8ee1a8c261389266ee759a740e42f87de85012f3b301.jpg",
    role: "owner",
  },
  {
    id: "2",
    name: "Sam Dy",
    email: "sam@ui8.net",
    avatarUrl: "https://cdn.21st.dev/assets/mirror/56/5619d988d9e8795f57f23caeac425062a8b972984cbe75e5a3fe3370e4dd60b9.jpg",
    role: "editor",
  },
  {
    id: "3",
    name: "Ellie Joy",
    email: "ellie@ui8.net",
    avatarUrl: "https://cdn.21st.dev/assets/mirror/b2/b2cd3e4ad761fd9954c265df5f86090c4f17c388c07f78332e75edfd7420f66a.jpg",
    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;