refactor: packages/

2 files changed, 101 insertions, 0 deletions

diff --git a/packages/excalidraw/components/FollowMode/FollowMode.scss b/packages/excalidraw/components/FollowMode/FollowMode.scss
new file mode 100644
index 0000000..383b3ce
--- /dev/null
+++ b/packages/excalidraw/components/FollowMode/FollowMode.scss
@@ -0,0 +1,59 @@
+.excalidraw {
+  .follow-mode {
+    position: absolute;
+    box-sizing: border-box;
+    pointer-events: none;
+    border: 2px solid var(--color-primary-hover);
+    z-index: 9999;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+
+    &__badge {
+      background-color: var(--color-primary-hover);
+      color: var(--color-primary-light);
+      padding: 0.25rem 0.5rem;
+      margin-bottom: 0.5rem;
+      border-radius: 0.5rem;
+      pointer-events: all;
+      font-size: 0.75rem;
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+
+      &__label {
+        display: flex;
+        white-space: pre-wrap;
+        line-height: 1;
+      }
+
+      &__username {
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 100px;
+      }
+    }
+
+    &__disconnect-btn {
+      all: unset;
+      cursor: pointer;
+      border-radius: 0.25rem;
+
+      &:hover {
+        background-color: var(--color-primary-darker);
+      }
+
+      &:active {
+        background-color: var(--color-primary-darkest);
+      }
+
+      svg {
+        display: block;
+        width: 1rem;
+        height: 1rem;
+      }
+    }
+  }
+}
diff --git a/packages/excalidraw/components/FollowMode/FollowMode.tsx b/packages/excalidraw/components/FollowMode/FollowMode.tsx
new file mode 100644
index 0000000..89581bf
--- /dev/null
+++ b/packages/excalidraw/components/FollowMode/FollowMode.tsx
@@ -0,0 +1,42 @@
+import type { UserToFollow } from "../../types";
+import { CloseIcon } from "../icons";
+import "./FollowMode.scss";
+
+interface FollowModeProps {
+  width: number;
+  height: number;
+  userToFollow: UserToFollow;
+  onDisconnect: () => void;
+}
+
+const FollowMode = ({
+  height,
+  width,
+  userToFollow,
+  onDisconnect,
+}: FollowModeProps) => {
+  return (
+    <div className="follow-mode" style={{ width, height }}>
+      <div className="follow-mode__badge">
+        <div className="follow-mode__badge__label">
+          Following{" "}
+          <span
+            className="follow-mode__badge__username"
+            title={userToFollow.username}
+          >
+            {userToFollow.username}
+          </span>
+        </div>
+        <button
+          type="button"
+          onClick={onDisconnect}
+          className="follow-mode__disconnect-btn"
+        >
+          {CloseIcon}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default FollowMode;