37 lines
1002 B
TypeScript
37 lines
1002 B
TypeScript
import clsx from "clsx";
|
|
|
|
interface FloatingActionButtonProps
|
|
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
children: React.ReactNode;
|
|
variant?: "default" | "critical";
|
|
ref?: React.RefObject<HTMLButtonElement | null>;
|
|
}
|
|
|
|
function FloatingActionButton({
|
|
children,
|
|
variant = "default",
|
|
className,
|
|
onClick,
|
|
ref,
|
|
...props
|
|
}: FloatingActionButtonProps) {
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
ref={ref}
|
|
className={clsx(
|
|
"2xl:p-[0.833vw] p-3 rounded-full transition-all cursor-pointer disabled:!cursor-default outline-none backdrop-blur-[10px]",
|
|
variant === "default" &&
|
|
"2xl:border-[0.069vw] border border-[#FFFFFF]/15 bg-[#000000]/15 hover:bg-[#000000]/25 hover:border-[#FFFFFF]/25 active:bg-[#7B60F3] active:border-[#FFFFFF]/25",
|
|
variant === "critical" && "bg-[#FF4517] hover:bg-[#FF4517]/85",
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
export default FloatingActionButton;
|