feat: follow mode (#6848)

Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
2023-12-15 00:07:11 +01:00
parent 88a2b286c7
commit aad8ab0123
28 changed files with 1039 additions and 138 deletions
@@ -0,0 +1,43 @@
+import { 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 style={{ position: "relative" }}>
+      <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
+            onClick={onDisconnect}
+            className="follow-mode__disconnect-btn"
+          >
+            {CloseIcon}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FollowMode;