import React, { useState } from "react"; import RenderOverlay from "./Overlay"; import { ArrowIcon, CloseIcon } from "../icons/ExportCommonIcons"; import { AccessOption, User } from "../../types/users"; import RegularDropDown from "../ui/inputs/RegularDropDown"; import { access } from "fs"; import MultiEmailInvite from "../ui/inputs/MultiEmailInvite"; interface UserListTemplateProps { user: User; } const UserListTemplate: React.FC = ({ user }) => { const [accessSelection, setAccessSelection] = useState(user.access); function accessUpdate({ option }: AccessOption) { setAccessSelection(option); } return (
{user.profileImage ? ( {`${user.name}'s ) : (
{user.name[0]}
)}
{user.name}
accessUpdate({ option })} search={false} /> {/* */}
); }; interface CollaborateProps { setUserManagement: (value: boolean) => void; } const CollaborationPopup: React.FC = ({ setUserManagement, }) => { const userName = localStorage.getItem("userName") || "Anonymous"; const users = [ { name: "Alice Johnson", email: "alice.johnson@example.com", profileImage: "", color: "#FF6600", access: "Admin", }, { name: "Bob Smith", email: "bob.smith@example.com", profileImage: "", color: "#488EF6", access: "Viewer", }, { name: "Charlie Brown", email: "charlie.brown@example.com", profileImage: "", color: "#48AC2A", access: "Viewer", }, { name: "Diana Prince", email: "diana.prince@example.com", profileImage: "", color: "#D44242", access: "Viewer", }, ]; return (
{ setUserManagement(false); }} >
{ e.preventDefault(); e.stopPropagation(); }} >
Share this file
copy link
{ setUserManagement(false); }} >
Who has access
Untitled
{users.length} persons
{userName[0]}
{userName}
you
{users.map((user, index) => ( ))}
); }; export default CollaborationPopup;