mirror of
https://bitbucket.org/Mattrixwv/mattrixwvreactcomponents.git
synced 2025-12-07 14:13:58 -05:00
47 lines
1.7 KiB
TypeScript
47 lines
1.7 KiB
TypeScript
import type { ButtonProps } from "$/types/Button";
|
|
import clsx from "clsx";
|
|
import Button from "./Button";
|
|
|
|
|
|
export default function LightButton(props: ButtonProps){
|
|
const {
|
|
className,
|
|
variant = "standard",
|
|
disabled
|
|
} = props;
|
|
|
|
|
|
return (
|
|
<Button
|
|
{...props}
|
|
className={clsx(
|
|
"transition duration-300",
|
|
className,
|
|
//Background
|
|
{
|
|
"bg-white hover:bg-neutral-300 active:bg-neutral-400": (variant === "standard") && (!disabled),
|
|
"bg-neutral-400/80": (variant === "standard") && (disabled),
|
|
"bg-transparent": (variant === "outline" || variant === "icon"),
|
|
"bg-transparent hover:bg-white active:bg-neutral-300": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
|
|
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
|
|
},
|
|
//Outline
|
|
{
|
|
"border-white hover:border-neutral-300 active:border-neutral-400": (variant === "standard" || variant === "outline") && (!disabled),
|
|
"border-neutral-400/80": (variant === "standard" || variant === "outline") && (disabled),
|
|
"border-white hover:border-white active:border-neutral-300": (variant === "outline-ghost") && (!disabled),
|
|
"border-neutral-400/80 ": (variant === "outline-ghost") && (disabled)
|
|
},
|
|
//Text
|
|
{
|
|
"text-black": variant === "standard",
|
|
"text-white hover:text-neutral-300 active:text-neutral-400": (variant === "outline" || variant === "icon") && (!disabled),
|
|
"text-neutral-400/80": (variant === "outline" || variant === "icon") && (disabled),
|
|
"text-white hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
|
|
"text-neutral-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
|
|
}
|
|
)}
|
|
/>
|
|
);
|
|
}
|