45 lines
1.0 KiB
TypeScript
45 lines
1.0 KiB
TypeScript
|
import React from "react";
|
||
|
|
import clsx from "clsx";
|
||
|
|
import { ToolButton } from "./ToolButton";
|
||
|
|
import { t } from "../i18n";
|
||
|
|
import useIsMobile from "../is-mobile";
|
||
|
|
import { users } from "./icons";
|
||
|
|
|
||
|
|
import "./CollabButton.scss";
|
||
|
|
import { EVENT_DIALOG, trackEvent } from "../analytics";
|
||
|
|
|
||
|
|
const CollabButton = ({
|
||
|
|
isCollaborating,
|
||
|
|
collaboratorCount,
|
||
|
|
onClick,
|
||
|
|
}: {
|
||
|
|
isCollaborating: boolean;
|
||
|
|
collaboratorCount: number;
|
||
|
|
onClick: () => void;
|
||
|
|
}) => {
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<ToolButton
|
||
|
|
className={clsx("CollabButton", {
|
||
|
|
"is-collaborating": isCollaborating,
|
||
|
|
})}
|
||
|
|
onClick={() => {
|
||
|
|
trackEvent(EVENT_DIALOG, "collaboration");
|
||
|
|
onClick();
|
||
|
|
}}
|
||
|
|
icon={users}
|
||
|
|
type="button"
|
||
|
|
title={t("buttons.roomDialog")}
|
||
|
|
aria-label={t("buttons.roomDialog")}
|
||
|
|
showAriaLabel={useIsMobile()}
|
||
|
|
>
|
||
|
|
{collaboratorCount > 0 && (
|
||
|
|
<div className="CollabButton-collaborators">{collaboratorCount}</div>
|
||
|
|
)}
|
||
|
|
</ToolButton>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default CollabButton;
|