BaseLibraries/MattrixwvReactComponents
1
0
Fork 0
mirror of https://bitbucket.org/Mattrixwv/mattrixwvreactcomponents.git synced 2025-12-06 21:53:57 -05:00
Code Issues Packages Projects Releases Wiki Activity

Most simple components created

Browse Source
This commit is contained in:
Mattrixwv
2025-07-18 23:30:48 -04:00
commit 5421c2346a
134 changed files with 13805 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
lib/component/button/PrimaryButton.tsx Normal file
View File

@@ -0,0 +1,46 @@
import type { ButtonProps } from "$/types/Button";
import clsx from "clsx";
import Button from "./Button";
export default function PrimaryButton(props: ButtonProps){
const {
className,
variant = "standard",
disabled
} = props;
return (
<Button
{...props}
className={clsx(
"transition duration-300",
className,
//Background
{
"bg-blue-600 hover:bg-blue-700 active:bg-blue-800": (variant === "standard") && (!disabled),
"bg-blue-400/80": (variant === "standard") && (disabled),
"bg-transparent": (variant === "outline" || variant === "icon"),
"bg-transparent hover:bg-blue-600 active:bg-blue-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
},
//Outline
{
"border-blue-600 hover:border-blue-700 active:border-blue-800": (variant === "standard" || variant === "outline") && (!disabled),
"border-blue-400/80": (variant === "standard" || variant === "outline") && (disabled),
"border-blue-600 hover:border-blue-600 active:border-blue-700": (variant === "outline-ghost") && (!disabled),
"border-blue-400/80 ": (variant === "outline-ghost") && (disabled)
},
//Text
{
"text-white": variant === "standard",
"text-blue-600 hover:text-blue-700 active:text-blue-800": (variant === "outline" || variant === "icon") && (!disabled),
"text-blue-400/80": (variant === "outline" || variant === "icon") && (disabled),
"text-blue-600 hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"text-blue-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
}
)}
/>
);
}