wilandwil
b3b30fdf49
_**WAITING FOR THE SERVER UPDATE FOR END-TO-END TESTING**_ - created ui and queue communication for switching camera aspect ratio done - editor's render camera read queue to switch camera aspect ratio - letterbox now available in camera view mode for a better preview of the aspect ratios - updated ui to match figma design after design update - vertical camera styling updates (by bflat) - finalized our render resolutions at different aspect ratio --------- Co-authored-by: wil <wil@storyteller.ai>
40 lines
1.0 KiB
TypeScript
40 lines
1.0 KiB
TypeScript
import {
|
|
FontAwesomeIcon,
|
|
FontAwesomeIconProps,
|
|
} from "@fortawesome/react-fontawesome";
|
|
import { twMerge } from "tailwind-merge";
|
|
import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
|
|
|
|
interface ButtonIconProps extends FontAwesomeIconProps {
|
|
icon: IconDefinition;
|
|
onClick: () => void;
|
|
className?: string;
|
|
bgFill?: boolean;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export const ButtonIcon = ({
|
|
icon,
|
|
size,
|
|
onClick,
|
|
className: propsClassName,
|
|
bgFill = false,
|
|
disabled,
|
|
...rest
|
|
}: ButtonIconProps) => {
|
|
const className = twMerge(
|
|
"box-content flex h-8 w-8 items-center justify-center rounded-lg transition-all duration-150",
|
|
bgFill
|
|
? "bg-ui-controls-button hover:bg-ui-controls-button/[0.75]"
|
|
: "bg-transparent hover:bg-ui-panel/[0.4]",
|
|
disabled && "opacity-50 hover:bg-transparent",
|
|
propsClassName,
|
|
);
|
|
|
|
return (
|
|
<button className={className} onClick={onClick} disabled={disabled}>
|
|
<FontAwesomeIcon icon={icon} size={size} {...rest} />
|
|
</button>
|
|
);
|
|
};
|