51 lines
1.8 KiB
TypeScript
51 lines
1.8 KiB
TypeScript
import type { ButtonProps } from "$/types/ButtonTypes";
|
|
import clsx from "clsx";
|
|
import { forwardRef } from "react";
|
|
import Button from "./Button";
|
|
|
|
|
|
const SecondaryButton = forwardRef<HTMLButtonElement, ButtonProps>(({
|
|
className,
|
|
variant = "standard",
|
|
disabled,
|
|
...buttonProps
|
|
}, ref) => {
|
|
return (
|
|
<Button
|
|
data-testid="mattrixwv-secondary-button"
|
|
{...buttonProps}
|
|
ref={ref}
|
|
variant={variant}
|
|
disabled={disabled}
|
|
className={clsx(
|
|
"transition duration-300",
|
|
className,
|
|
//Background
|
|
{
|
|
"bg-secondary active:bg-secondary-dark": (variant === "standard") && (!disabled),
|
|
"bg-secondary-light/80": (variant === "standard") && (disabled),
|
|
"bg-transparent": (variant === "outline" || variant === "icon"),
|
|
"bg-transparent hover:bg-secondary active:bg-secondary-dark": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
|
|
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
|
|
},
|
|
//Outline
|
|
{
|
|
"border-secondary active:border-secondary-dark": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (!disabled),
|
|
"border-secondary-light/80": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (disabled)
|
|
},
|
|
//Text
|
|
{
|
|
"text-white": variant === "standard",
|
|
"text-secondary active:text-secondary-dark": (variant === "outline" || variant === "icon") && (!disabled),
|
|
"text-secondary-light/80": (variant === "outline" || variant === "icon" || variant === "ghost" || variant === "outline-ghost") && (disabled),
|
|
"text-secondary hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled)
|
|
}
|
|
)}
|
|
/>
|
|
);
|
|
});
|
|
|
|
SecondaryButton.displayName = "SecondaryButton";
|
|
|
|
export default SecondaryButton;
|