BaseLibraries/MattrixwvReactComponents
1
0
Fork 0
Code Issues 3 Packages Projects Releases Wiki Activity

Update themed components with refs and css

Browse Source
This commit is contained in:
Matthew Ellison
2026-02-10 21:09:36 -05:00
parent 456feed128
commit 2e54b81d8f
72 changed files with 1147 additions and 562 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
lib/component/button/MoltenButton.tsx
View File

@@ -1,47 +1,50 @@
import type { ButtonProps } from "$/types/ButtonTypes";
import clsx from "clsx";
import { forwardRef } from "react";
import Button from "./Button";
export default function MoltenButton(props: ButtonProps){
const {
className,
variant = "standard",
disabled
} = props;
const MoltenButton = forwardRef<HTMLButtonElement, ButtonProps>(({
className,
variant = "standard",
disabled,
...buttonProps
}, ref) => {
return (
<Button
data-testid="mattrixwv-molten-button"
{...props}
{...buttonProps}
ref={ref}
variant={variant}
disabled={disabled}
className={clsx(
"transition duration-300",
className,
//Background
{
"bg-orange-600 hover:bg-orange-700 active:bg-orange-800": (variant === "standard") && (!disabled),
"bg-orange-400/80": (variant === "standard") && (disabled),
"bg-molten active:bg-molten-dark": (variant === "standard") && (!disabled),
"bg-molten-light/80": (variant === "standard") && (disabled),
"bg-transparent": (variant === "outline" || variant === "icon"),
"bg-transparent hover:bg-orange-600 active:bg-orange-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"bg-transparent hover:bg-molten active:bg-molten-dark": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
},
//Outline
{
"border-orange-600 hover:border-orange-700 active:border-orange-800": (variant === "standard" || variant === "outline") && (!disabled),
"border-orange-400/80": (variant === "standard" || variant === "outline") && (disabled),
"border-orange-600 hover:border-orange-600 active:border-orange-700": (variant === "outline-ghost") && (!disabled),
"border-orange-400/80 ": (variant === "outline-ghost") && (disabled)
"border-molten active:border-molten-dark": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (!disabled),
"border-molten-light/80": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (disabled)
},
//Text
{
"text-white": variant === "standard",
"text-orange-600 hover:text-orange-700 active:text-orange-800": (variant === "outline" || variant === "icon") && (!disabled),
"text-orange-400/80": (variant === "outline" || variant === "icon") && (disabled),
"text-orange-600 hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"text-orange-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
"text-black": variant === "standard",
"text-molten active:text-molten-dark": (variant === "outline" || variant === "icon") && (!disabled),
"text-molten-light/80": (variant === "outline" || variant === "icon" || variant === "ghost" || variant === "outline-ghost") && (disabled),
"text-molten hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled)
}
)}
/>
);
}
});
MoltenButton.displayName = "MoltenButton";
export default MoltenButton;