mirror of
https://bitbucket.org/Mattrixwv/mattrixwvreactcomponents.git
synced 2025-12-06 21:53:57 -05:00
Most simple components created
This commit is contained in:
57
lib/component/button/Button.tsx
Normal file
57
lib/component/button/Button.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
import type { ButtonProps } from "$/types/Button";
|
||||
import clsx from "clsx";
|
||||
|
||||
|
||||
export default function Button(props: ButtonProps){
|
||||
const {
|
||||
className,
|
||||
rounding = "lg",
|
||||
shape = "rectangle",
|
||||
size = "md",
|
||||
variant = "standard",
|
||||
disabled,
|
||||
...buttonProps
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<button
|
||||
{...buttonProps}
|
||||
disabled={disabled}
|
||||
className={clsx(
|
||||
className,
|
||||
//Rounding
|
||||
{
|
||||
"rounded-none": rounding === "none",
|
||||
"rounded-sm": rounding === "sm",
|
||||
"rounded": rounding === "md",
|
||||
"rounded-lg": rounding === "lg",
|
||||
"rounded-full": rounding === "full"
|
||||
},
|
||||
//Size and shape
|
||||
{
|
||||
"p-0": size === "xs" && shape === "square",
|
||||
"p-1": size === "sm" && shape === "square",
|
||||
"p-2": size === "md" && shape === "square",
|
||||
"p-3": size === "lg" && shape === "square",
|
||||
"p-4": size === "xl" && shape === "square",
|
||||
|
||||
"px-1 py-0": size === "xs" && shape === "rectangle",
|
||||
"px-2 py-1": size === "sm" && shape === "rectangle",
|
||||
"px-4 py-2": size === "md" && shape === "rectangle",
|
||||
"px-6 py-3": size === "lg" && shape === "rectangle",
|
||||
"px-8 py-4": size === "xl" && shape === "rectangle",
|
||||
},
|
||||
//Variant
|
||||
{
|
||||
"border": variant === "standard" || variant === "outline" || variant === "outline-ghost",
|
||||
"border-none": variant === "ghost" || variant === "icon"
|
||||
},
|
||||
//Disabled
|
||||
{
|
||||
"cursor-pointer": !disabled
|
||||
}
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
46
lib/component/button/DangerButton.tsx
Normal file
46
lib/component/button/DangerButton.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import type { ButtonProps } from "$/types/Button";
|
||||
import clsx from "clsx";
|
||||
import Button from "./Button";
|
||||
|
||||
|
||||
export default function DangerButton(props: ButtonProps){
|
||||
const {
|
||||
className,
|
||||
variant = "standard",
|
||||
disabled
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<Button
|
||||
{...props}
|
||||
className={clsx(
|
||||
"transition duration-300",
|
||||
className,
|
||||
//Background
|
||||
{
|
||||
"bg-red-600 hover:bg-red-700 active:bg-red-800": (variant === "standard") && (!disabled),
|
||||
"bg-red-400/80": (variant === "standard") && (disabled),
|
||||
"bg-transparent": (variant === "outline" || variant === "icon"),
|
||||
"bg-transparent hover:bg-red-600 active:bg-red-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
|
||||
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
|
||||
},
|
||||
//Outline
|
||||
{
|
||||
"border-red-600 hover:border-red-700 active:border-red-800": (variant === "standard" || variant === "outline") && (!disabled),
|
||||
"border-red-400/80": (variant === "standard" || variant === "outline") && (disabled),
|
||||
"border-red-600 hover:border-red-600 active:border-red-700": (variant === "outline-ghost") && (!disabled),
|
||||
"border-red-400/80 ": (variant === "outline-ghost") && (disabled)
|
||||
},
|
||||
//Text
|
||||
{
|
||||
"text-white": variant === "standard",
|
||||
"text-red-600 hover:text-red-700 active:text-red-800": (variant === "outline" || variant === "icon") && (!disabled),
|
||||
"text-red-400/80": (variant === "outline" || variant === "icon") && (disabled),
|
||||
"text-red-600 hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
|
||||
"text-red-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
|
||||
}
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
46
lib/component/button/DarkButton.tsx
Normal file
46
lib/component/button/DarkButton.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
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)
|
||||
}
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
46
lib/component/button/InfoButton.tsx
Normal file
46
lib/component/button/InfoButton.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import type { ButtonProps } from "$/types/Button";
|
||||
import clsx from "clsx";
|
||||
import Button from "./Button";
|
||||
|
||||
|
||||
export default function InfoButton(props: ButtonProps){
|
||||
const {
|
||||
className,
|
||||
variant = "standard",
|
||||
disabled
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<Button
|
||||
{...props}
|
||||
className={clsx(
|
||||
"transition duration-300",
|
||||
className,
|
||||
//Background
|
||||
{
|
||||
"bg-cyan-500 hover:bg-cyan-600 active:bg-cyan-700": (variant === "standard") && (!disabled),
|
||||
"bg-sky-300/80": (variant === "standard") && (disabled),
|
||||
"bg-transparent": (variant === "outline" || variant === "icon"),
|
||||
"bg-transparent hover:bg-cyan-500 active:bg-cyan-600": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
|
||||
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
|
||||
},
|
||||
//Outline
|
||||
{
|
||||
"border-cyan-500 hover:border-cyan-600 active:border-cyan-700": (variant === "standard" || variant === "outline") && (!disabled),
|
||||
"border-sky-300/80": (variant === "standard" || variant === "outline") && (disabled),
|
||||
"border-cyan-500 hover:border-cyan-500 active:border-cyan-600": (variant === "outline-ghost") && (!disabled),
|
||||
"border-sky-300/80 ": (variant === "outline-ghost") && (disabled)
|
||||
},
|
||||
//Text
|
||||
{
|
||||
"text-black": variant === "standard",
|
||||
"text-cyan-500 hover:text-cyan-600 active:text-cyan-700": (variant === "outline" || variant === "icon") && (!disabled),
|
||||
"text-sky-300/80": (variant === "outline" || variant === "icon") && (disabled),
|
||||
"text-cyan-500 hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
|
||||
"text-sky-300/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
|
||||
}
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
46
lib/component/button/LightButton.tsx
Normal file
46
lib/component/button/LightButton.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
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)
|
||||
}
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
46
lib/component/button/MoltenButton.tsx
Normal file
46
lib/component/button/MoltenButton.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import type { ButtonProps } from "$/types/Button";
|
||||
import clsx from "clsx";
|
||||
import Button from "./Button";
|
||||
|
||||
|
||||
export default function MoltenButton(props: ButtonProps){
|
||||
const {
|
||||
className,
|
||||
variant = "standard",
|
||||
disabled
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<Button
|
||||
{...props}
|
||||
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-transparent": (variant === "outline" || variant === "icon"),
|
||||
"bg-transparent hover:bg-orange-600 active:bg-orange-700": (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)
|
||||
},
|
||||
//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)
|
||||
}
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
46
lib/component/button/PrimaryButton.tsx
Normal file
46
lib/component/button/PrimaryButton.tsx
Normal 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)
|
||||
}
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
46
lib/component/button/SecondaryButton.tsx
Normal file
46
lib/component/button/SecondaryButton.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import type { ButtonProps } from "$/types/Button";
|
||||
import clsx from "clsx";
|
||||
import Button from "./Button";
|
||||
|
||||
|
||||
export default function SecondaryButton(props: ButtonProps){
|
||||
const {
|
||||
className,
|
||||
variant = "standard",
|
||||
disabled
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<Button
|
||||
{...props}
|
||||
className={clsx(
|
||||
"transition duration-300",
|
||||
className,
|
||||
//Background
|
||||
{
|
||||
"bg-neutral-500 hover:bg-neutral-600 active:bg-neutral-700": (variant === "standard") && (!disabled),
|
||||
"bg-neutral-300/80": (variant === "standard") && (disabled),
|
||||
"bg-transparent": (variant === "outline" || variant === "icon"),
|
||||
"bg-transparent hover:bg-neutral-500 active:bg-neutral-600": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
|
||||
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
|
||||
},
|
||||
//Outline
|
||||
{
|
||||
"border-neutral-500 hover:border-neutral-600 active:border-neutral-700": (variant === "standard" || variant === "outline") && (!disabled),
|
||||
"border-neutral-300/80": (variant === "standard" || variant === "outline") && (disabled),
|
||||
"border-neutral-500 hover:border-neutral-500 active:border-neutral-600": (variant === "outline-ghost") && (!disabled),
|
||||
"border-neutral-300/80 ": (variant === "outline-ghost") && (disabled)
|
||||
},
|
||||
//Text
|
||||
{
|
||||
"text-white": variant === "standard",
|
||||
"text-neutral-500 hover:text-neutral-600 active:text-neutral-700": (variant === "outline" || variant === "icon") && (!disabled),
|
||||
"text-neutral-300/80": (variant === "outline" || variant === "icon") && (disabled),
|
||||
"text-neutral-500 hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
|
||||
"text-neutral-300/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
|
||||
}
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
46
lib/component/button/SuccessButton.tsx
Normal file
46
lib/component/button/SuccessButton.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import type { ButtonProps } from "$/types/Button";
|
||||
import clsx from "clsx";
|
||||
import Button from "./Button";
|
||||
|
||||
|
||||
export default function SuccessButton(props: ButtonProps){
|
||||
const {
|
||||
className,
|
||||
variant = "standard",
|
||||
disabled
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<Button
|
||||
{...props}
|
||||
className={clsx(
|
||||
"transition duration-300",
|
||||
className,
|
||||
//Background
|
||||
{
|
||||
"bg-green-600 hover:bg-green-700 active:bg-green-800": (variant === "standard") && (!disabled),
|
||||
"bg-green-400/80": (variant === "standard") && (disabled),
|
||||
"bg-transparent": (variant === "outline" || variant === "icon"),
|
||||
"bg-transparent hover:bg-green-600 active:bg-green-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
|
||||
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
|
||||
},
|
||||
//Outline
|
||||
{
|
||||
"border-green-600 hover:border-green-700 active:border-green-800": (variant === "standard" || variant === "outline") && (!disabled),
|
||||
"border-green-400/80": (variant === "standard" || variant === "outline") && (disabled),
|
||||
"border-green-600 hover:border-green-600 active:border-green-700": (variant === "outline-ghost") && (!disabled),
|
||||
"border-green-400/80 ": (variant === "outline-ghost") && (disabled)
|
||||
},
|
||||
//Text
|
||||
{
|
||||
"text-white": variant === "standard",
|
||||
"text-green-600 hover:text-green-700 active:text-green-800": (variant === "outline" || variant === "icon") && (!disabled),
|
||||
"text-green-400/80": (variant === "outline" || variant === "icon") && (disabled),
|
||||
"text-green-600 hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
|
||||
"text-green-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
|
||||
}
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
46
lib/component/button/TertiaryButton.tsx
Normal file
46
lib/component/button/TertiaryButton.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import type { ButtonProps } from "$/types/Button";
|
||||
import clsx from "clsx";
|
||||
import Button from "./Button";
|
||||
|
||||
|
||||
export default function TertiaryButton(props: ButtonProps){
|
||||
const {
|
||||
className,
|
||||
variant = "standard",
|
||||
disabled
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<Button
|
||||
{...props}
|
||||
className={clsx(
|
||||
"transition duration-300",
|
||||
className,
|
||||
//Background
|
||||
{
|
||||
"bg-purple-600 hover:bg-purple-700 active:bg-purple-800": (variant === "standard") && (!disabled),
|
||||
"bg-purple-400/80": (variant === "standard") && (disabled),
|
||||
"bg-transparent": (variant === "outline" || variant === "icon"),
|
||||
"bg-transparent hover:bg-purple-600 active:bg-purple-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
|
||||
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
|
||||
},
|
||||
//Outline
|
||||
{
|
||||
"border-purple-600 hover:border-purple-700 active:border-purple-800": (variant === "standard" || variant === "outline") && (!disabled),
|
||||
"border-purple-400/80": (variant === "standard" || variant === "outline") && (disabled),
|
||||
"border-purple-600 hover:border-purple-600 active:border-purple-700": (variant === "outline-ghost") && (!disabled),
|
||||
"border-purple-400/80 ": (variant === "outline-ghost") && (disabled)
|
||||
},
|
||||
//Text
|
||||
{
|
||||
"text-white": variant === "standard",
|
||||
"text-purple-600 hover:text-purple-700 active:text-purple-800": (variant === "outline" || variant === "icon") && (!disabled),
|
||||
"text-purple-400/80": (variant === "outline" || variant === "icon") && (disabled),
|
||||
"text-purple-600 hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
|
||||
"text-purple-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
|
||||
}
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
46
lib/component/button/WarningButton.tsx
Normal file
46
lib/component/button/WarningButton.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import type { ButtonProps } from "$/types/Button";
|
||||
import clsx from "clsx";
|
||||
import Button from "./Button";
|
||||
|
||||
|
||||
export default function WarningButton(props: ButtonProps){
|
||||
const {
|
||||
className,
|
||||
variant = "standard",
|
||||
disabled
|
||||
} = props;
|
||||
|
||||
|
||||
return (
|
||||
<Button
|
||||
{...props}
|
||||
className={clsx(
|
||||
"transition duration-300",
|
||||
className,
|
||||
//Background
|
||||
{
|
||||
"bg-yellow-500 hover:bg-yellow-600 active:bg-yellow-700": (variant === "standard") && (!disabled),
|
||||
"bg-yellow-300/80": (variant === "standard") && (disabled),
|
||||
"bg-transparent": (variant === "outline" || variant === "icon"),
|
||||
"bg-transparent hover:bg-yellow-500 active:bg-yellow-600": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
|
||||
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
|
||||
},
|
||||
//Outline
|
||||
{
|
||||
"border-yellow-500 hover:border-yellow-600 active:border-yellow-700": (variant === "standard" || variant === "outline") && (!disabled),
|
||||
"border-yellow-300/80": (variant === "standard" || variant === "outline") && (disabled),
|
||||
"border-yellow-500 hover:border-yellow-500 active:border-yellow-600": (variant === "outline-ghost") && (!disabled),
|
||||
"border-yellow-300/80 ": (variant === "outline-ghost") && (disabled)
|
||||
},
|
||||
//Text
|
||||
{
|
||||
"text-black": variant === "standard",
|
||||
"text-yellow-500 hover:text-yellow-600 active:text-yellow-700": (variant === "outline" || variant === "icon") && (!disabled),
|
||||
"text-yellow-300/80": (variant === "outline" || variant === "icon") && (disabled),
|
||||
"text-yellow-500 hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
|
||||
"text-yellow-300/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
|
||||
}
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user