first commit

app/src/components/templates/CollaborationPopup.tsx

@@ -0,0 +1,128 @@
+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<UserListTemplateProps> = ({ user }) => {
+  const [accessSelection, setAccessSelection] = useState<string>(user.access);
+
+  function accessUpdate({ option }: AccessOption) {
+    setAccessSelection(option);
+  }
+
+  return (
+    <div className="user-list-container">
+      <div className="user-details">
+        <div className="profile-image">
+          {user.profileImage ? (
+            <img
+              src={user.profileImage || "https://via.placeholder.com/150"}
+              alt={`${user.name}'s profile`}
+            />
+          ) : (
+            <div
+              className="no-profile-container"
+              style={{ background: user.color }}
+            >
+              {user.name[0]}
+            </div>
+          )}
+        </div>
+        <div className="user-name">{user.name}</div>
+      </div>
+      <div className="user-access">
+        <RegularDropDown
+          header={accessSelection}
+          options={["Admin", "User", "Viewer"]}
+          onSelect={(option) => accessUpdate({ option })}
+          search={false}
+        />
+        {/* <ArrowIcon /> */}
+      </div>
+    </div>
+  );
+};
+
+const CollaborationPopup: React.FC = () => {
+  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 (
+    <RenderOverlay>
+      <div className="collaboration-popup-wrapper">
+        <div className="collaboration-popup-container">
+          <div className="header">
+            <div className="content">Share this file</div>
+            <div className="content">
+              <div className="copy-link-button">copy link</div>
+              <div className="close-button">
+                <CloseIcon />
+              </div>
+            </div>
+          </div>
+          <div className="invite-input-container">
+            <MultiEmailInvite />
+          </div>
+          <div className="split"></div>
+          <div className="access-and-user-control-container">
+            <div className="user-header">Who has access</div>
+            <div className="general-access-container">
+              <div className="team-container">
+                <div className="project-name">Untitled</div>
+                <div className="number-of-peoples-have-access">
+                  {users.length} persons
+                </div>
+              </div>
+            </div>
+            <div className="users-list-container">
+              <div className="you-container">
+                <div className="your-name">User 1</div>
+                <div className="indicater">you</div>
+              </div>
+              {users.map((user, index) => (
+                <UserListTemplate key={index} user={user} />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </RenderOverlay>
+  );
+};
+
+export default CollaborationPopup;