Files
stream.graff.tech-new/client/src/components/ui/ControlButton.tsx
T
mikhail_lanskikh 28091d732a Enhance UI components and functionality across the application
- Updated ActionsSidebarWrapper to accept a ref for improved positioning.
- Enhanced SessionUsersPanel with new props for participant management, including mute and disable video functionalities.
- Added vertical positioning option to ActionsPopover for better alignment.
- Modified QRCodePopup and SharePopup to include a second argument in setPopup for type differentiation.
- Refactored ControlButton and Tooltip components for improved accessibility and styling.
- Updated UserCamera to integrate ActionsPopover for participant controls, enhancing user interaction.
- Improved PopoverWrapper to handle dynamic positioning based on parent element.
- Adjusted UserDevicesControls for better layout consistency and responsiveness.
- Enhanced popup management in the popupStore to track popup types.
2025-11-06 17:15:30 +05:00

55 lines
1.3 KiB
TypeScript

import clsx from "clsx";
import Warning from "../indicators/Warning";
import Tooltip from "./Tooltip";
interface ControlButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
size: "small" | "large";
icon: React.ReactNode;
}
function ControlButton({
size,
icon,
className,
disabled,
onClick,
...props
}: ControlButtonProps) {
return (
<button
onClick={onClick}
disabled={disabled}
{...props}
className={clsx(
"backdrop-blur-[10px]a relative rounded-full transition-colors cursor-pointer outline-none disabled:!cursor-default",
size === "large"
? "2xl:p-[0.833vw] p-3 bg-[#FFFFFF]/15 hover:bg-[#FFFFFF]/25"
: "2xl:p-[0.417vw] p-[6px] bg-[#141414]/15 hover:bg-[#141414]/25",
className
)}
>
<div
className={clsx(
"text-white",
size === "large"
? "2xl:size-[1.111vw] size-4"
: "2xl:size-[0.833vw] size-3"
)}
>
{icon}
</div>
{disabled && size === "large" && (
<Tooltip
label="Нет доступа"
className="absolute 2xl:-top-[0.139vw] 2xl:-right-[0.139vw] -top-0.5 -right-0.5"
>
<Warning type="critical" className="text-white" />
</Tooltip>
)}
</button>
);
}
export default ControlButton;