legacy-launch/src/components/IconButton.tsx

import React, { ButtonHTMLAttributes } from "react";

// Define the custom props we want to add
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
    variant?: "default" | "secondary";
}

export default function IconButton({
    variant = "default",
    className = "",
    children,
    ...props
}: ButtonProps) {
    const variantStyles = {
        default: "bg-[#49753b] hover:bg-[color-mix(in_srgb,#49753b,black_15%)]",
        secondary:
            "bg-[#6f5236] hover:bg-[color-mix(in_srgb,#6f5236,black_15%)]",
    };

    const baseStyles =
        "select-none cursor-pointer rounded-full text-white aspect-square p-2 transition-colors flex justify-center items-center";
    const combinedClasses =
        `${baseStyles} ${variantStyles[variant]} ${className}`.trim();

    return (
        <button className={combinedClasses} {...props}>
            {children}
        </button>
    );
}