mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-05 17:58:55 +00:00
Brandon Thomas
b31badc6d1
We'll be using this for our image generation roadmap: https://docs.google.com/document/d/1O9YI_iLwXkl2wAJJ23dFp3eHR-JzhlRHCBPD8psG-1E/edit The original Studio Gen 2 is in the `frontend/studio-gen-2` directory. The original Studio Gen 1 is in the `frontend/studio-gen-1` directory
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>
|
|
);
|
|
};
|