MattrixwvReactComponents/lib/component/button/DarkButton.tsx

import type { ButtonProps } from "$/types/Button";
import clsx from "clsx";
import Button from "./Button";


export default function DarkButton(props: ButtonProps){
	const {
		className,
		variant = "standard",
		disabled
	} = props;


	return (
		<Button
			{...props}
			className={clsx(
				"transition duration-300",
				className,
				//Background
				{
					"bg-black hover:bg-neutral-700 active:bg-neutral-600": (variant === "standard") && (!disabled),
					"bg-neutral-700/80": (variant === "standard") && (disabled),
					"bg-transparent": (variant === "outline" || variant === "icon"),
					"bg-transparent hover:bg-black active:bg-neutral-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
					"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
				},
				//Outline
				{
					"border-black hover:border-neutral-700 active:border-neutral-600": (variant === "standard" || variant === "outline") && (!disabled),
					"border-neutral-700/80": (variant === "standard" || variant === "outline") && (disabled),
					"border-black hover:border-black active:border-neutral-700": (variant === "outline-ghost") && (!disabled),
					"border-neutral-700/80 ": (variant === "outline-ghost") && (disabled)
				},
				//Text
				{
					"text-white": variant === "standard",
					"text-black hover:text-neutral-700 active:text-neutral-600": (variant === "outline" || variant === "icon") && (!disabled),
					"text-neutral-700/80": (variant === "outline" || variant === "icon") && (disabled),
					"text-black hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
					"text-neutral-700/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
				}
			)}
		/>
	);
}