Updates
This commit is contained in:
+117
-137
@@ -44,6 +44,122 @@ export type TWUIButtonProps = DetailedHTMLProps<
|
||||
loadingProps?: ComponentProps<typeof Loading>;
|
||||
};
|
||||
|
||||
const buttonClasses: Record<string, Record<string, string>> = {
|
||||
normal: {
|
||||
primary: twMerge(
|
||||
"bg-primary hover:bg-primary-hover text-white",
|
||||
"dark:bg-primary-dark hover:dark:bg-primary-dark-hover",
|
||||
"twui-button-primary",
|
||||
),
|
||||
secondary: twMerge(
|
||||
"bg-secondary hover:bg-secondary-hover text-white",
|
||||
"twui-button-secondary",
|
||||
),
|
||||
white: twMerge(
|
||||
"!bg-white hover:!bg-slate-200 !text-slate-800",
|
||||
"twui-button-white",
|
||||
),
|
||||
accent: twMerge(
|
||||
"bg-accent hover:bg-accent-hover text-white",
|
||||
"twui-button-accent",
|
||||
),
|
||||
gray: twMerge(
|
||||
"bg-gray hover:bg-gray-hover text-foreground-light",
|
||||
"dark:bg-gray-dark hover:dark:bg-gray-dark-hover dark:text-foreground-dark",
|
||||
"twui-button-gray",
|
||||
),
|
||||
success: twMerge(
|
||||
"bg-success hover:bg-success-hover text-white",
|
||||
"dark:bg-success hover:dark:bg-success-hover",
|
||||
"twui-button-success",
|
||||
),
|
||||
error: twMerge(
|
||||
"bg-error hover:bg-error-hover text-white",
|
||||
"dark:bg-error hover:dark:bg-error-hover",
|
||||
"twui-button-error",
|
||||
),
|
||||
},
|
||||
outlined: {
|
||||
primary: twMerge(
|
||||
"bg-transparent outline outline-1 outline-primary",
|
||||
"text-primary-text dark:text-primary-dark-text dark:outline-primary-dark-outline",
|
||||
"twui-button-primary-outlined",
|
||||
),
|
||||
secondary: twMerge(
|
||||
"bg-transparent outline outline-1 outline-secondary",
|
||||
"text-secondary",
|
||||
"twui-button-secondary-outlined",
|
||||
),
|
||||
accent: twMerge(
|
||||
"bg-transparent outline outline-1 outline-accent",
|
||||
"text-accent",
|
||||
"twui-button-accent-outlined",
|
||||
),
|
||||
gray: twMerge(
|
||||
"bg-transparent outline outline-1 outline-slate-300",
|
||||
"text-slate-600 dark:text-white/60 dark:outline-white/30",
|
||||
"twui-button-gray-outlined",
|
||||
),
|
||||
white: twMerge(
|
||||
"bg-transparent outline outline-1 outline-white/50",
|
||||
"text-white",
|
||||
"twui-button-white-outlined",
|
||||
),
|
||||
error: twMerge(
|
||||
"bg-transparent outline outline-1 outline-error text-error",
|
||||
"dark:outline-error dark:text-error-dark",
|
||||
"twui-button-error-outlined",
|
||||
),
|
||||
},
|
||||
ghost: {
|
||||
primary: twMerge(
|
||||
"bg-transparent dark:bg-transparent outline-none p-2",
|
||||
"text-primary-text dark:text-primary-dark-text hover:bg-transparent dark:hover:bg-transparent",
|
||||
"twui-button-primary-ghost",
|
||||
),
|
||||
secondary: twMerge(
|
||||
"bg-transparent dark:bg-transparent outline-none p-2",
|
||||
"text-secondary hover:bg-transparent dark:hover:bg-transparent",
|
||||
"twui-button-secondary-ghost",
|
||||
),
|
||||
text: twMerge(
|
||||
"bg-transparent dark:bg-transparent outline-none p-2 dark:text-foreground-dark",
|
||||
"text-foreground-light hover:bg-transparent dark:hover:bg-transparent",
|
||||
"twui-button-secondary-ghost",
|
||||
),
|
||||
accent: twMerge(
|
||||
"bg-transparent dark:bg-transparent outline-none p-2",
|
||||
"text-accent hover:bg-transparent dark:hover:bg-transparent",
|
||||
"twui-button-accent-ghost",
|
||||
),
|
||||
gray: twMerge(
|
||||
"bg-transparent dark:bg-transparent outline-none p-2 hover:bg-transparent dark:hover:bg-transparent",
|
||||
"text-slate-600 dark:text-white/70 hover:opacity-80",
|
||||
"twui-button-gray-ghost",
|
||||
),
|
||||
error: twMerge(
|
||||
"bg-transparent outline-none p-2",
|
||||
"text-red-600 dark:text-red-400",
|
||||
"twui-button-error-ghost",
|
||||
),
|
||||
warning: twMerge(
|
||||
"bg-transparent outline-none p-2",
|
||||
"text-yellow-600",
|
||||
"twui-button-warning-ghost",
|
||||
),
|
||||
success: twMerge(
|
||||
"bg-transparent outline-none p-2",
|
||||
"text-success",
|
||||
"twui-button-success-ghost",
|
||||
),
|
||||
white: twMerge(
|
||||
"bg-transparent outline-none p-2",
|
||||
"text-white",
|
||||
"twui-button-white-ghost",
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* # Buttons
|
||||
* @className twui-button-general
|
||||
@@ -112,143 +228,7 @@ export default function Button({
|
||||
loadingProps,
|
||||
...props
|
||||
}: TWUIButtonProps) {
|
||||
const finalClassName: string = (() => {
|
||||
if (variant == "normal" || !variant) {
|
||||
if (color == "primary" || !color)
|
||||
return twMerge(
|
||||
"bg-primary hover:bg-primary-hover text-white",
|
||||
"dark:bg-primary-dark hover:dark:bg-primary-dark-hover text-white",
|
||||
"twui-button-primary",
|
||||
);
|
||||
if (color == "secondary")
|
||||
return twMerge(
|
||||
"bg-secondary hover:bg-secondary-hover text-white",
|
||||
"twui-button-secondary",
|
||||
);
|
||||
if (color == "white")
|
||||
return twMerge(
|
||||
"!bg-white hover:!bg-slate-200 !text-slate-800",
|
||||
"twui-button-white",
|
||||
);
|
||||
if (color == "accent")
|
||||
return twMerge(
|
||||
"bg-accent hover:bg-accent-hover text-white",
|
||||
"twui-button-accent",
|
||||
);
|
||||
if (color == "gray")
|
||||
return twMerge(
|
||||
"bg-gray hover:bg-gray-hover text-foreground-light",
|
||||
"dark:bg-gray-dark hover:dark:bg-gray-dark-hover dark:text-foreground-dark",
|
||||
"twui-button-gray",
|
||||
);
|
||||
if (color == "success")
|
||||
return twMerge(
|
||||
"bg-success hover:bg-success-hover text-white",
|
||||
"dark:bg-success hover:dark:bg-success-hover text-white",
|
||||
"twui-button-success",
|
||||
);
|
||||
if (color == "error")
|
||||
return twMerge(
|
||||
"bg-error hover:bg-error-hover text-white",
|
||||
"dark:bg-error hover:dark:bg-error-hover text-white",
|
||||
"twui-button-error",
|
||||
);
|
||||
} else if (variant == "outlined") {
|
||||
if (color == "primary" || !color)
|
||||
return twMerge(
|
||||
"bg-transparent outline outline-1 outline-primary",
|
||||
"text-primary-text dark:text-primary-dark-text dark:outline-primary-dark-outline",
|
||||
"twui-button-primary-outlined",
|
||||
);
|
||||
if (color == "secondary")
|
||||
return twMerge(
|
||||
"bg-transparent outline outline-1 outline-secondary",
|
||||
"text-secondary",
|
||||
"twui-button-secondary-outlined",
|
||||
);
|
||||
if (color == "accent")
|
||||
return twMerge(
|
||||
"bg-transparent outline outline-1 outline-accent",
|
||||
"text-accent",
|
||||
"twui-button-accent-outlined",
|
||||
);
|
||||
if (color == "gray")
|
||||
return twMerge(
|
||||
"bg-transparent outline outline-1 outline-slate-300",
|
||||
"text-slate-600 dark:text-white/60 dark:outline-white/30",
|
||||
"twui-button-gray-outlined",
|
||||
);
|
||||
if (color == "white")
|
||||
return twMerge(
|
||||
"bg-transparent outline outline-1 outline-white/50",
|
||||
"text-white",
|
||||
"twui-button-white-outlined",
|
||||
);
|
||||
if (color == "error")
|
||||
return twMerge(
|
||||
"bg-transparent outline outline-1 outline-error text-error",
|
||||
"dark:outline-error dark:text-error-dark",
|
||||
"twui-button-error-outlined",
|
||||
);
|
||||
} else if (variant == "ghost") {
|
||||
if (color == "primary" || !color)
|
||||
return twMerge(
|
||||
"bg-transparent dark:bg-transparent outline-none p-2",
|
||||
"text-primary-text dark:text-primary-dark-text hover:bg-transparent dark:hover:bg-transparent",
|
||||
"twui-button-primary-ghost",
|
||||
);
|
||||
if (color == "secondary")
|
||||
return twMerge(
|
||||
"bg-transparent dark:bg-transparent outline-none p-2",
|
||||
"text-secondary hover:bg-transparent dark:hover:bg-transparent",
|
||||
"twui-button-secondary-ghost",
|
||||
);
|
||||
if (color == "text")
|
||||
return twMerge(
|
||||
"bg-transparent dark:bg-transparent outline-none p-2 dark:text-foreground-dark",
|
||||
"text-foreground-light hover:bg-transparent dark:hover:bg-transparent",
|
||||
"twui-button-secondary-ghost",
|
||||
);
|
||||
if (color == "accent")
|
||||
return twMerge(
|
||||
"bg-transparent dark:bg-transparent outline-none p-2",
|
||||
"text-accent hover:bg-transparent dark:hover:bg-transparent",
|
||||
"twui-button-accent-ghost",
|
||||
);
|
||||
if (color == "gray")
|
||||
return twMerge(
|
||||
"bg-transparent dark:bg-transparent outline-none p-2 hover:bg-transparent dark:hover:bg-transparent",
|
||||
"text-slate-600 dark:text-white/70 hover:opacity-80",
|
||||
"twui-button-gray-ghost",
|
||||
);
|
||||
if (color == "error")
|
||||
return twMerge(
|
||||
"bg-transparent outline-none p-2",
|
||||
"text-red-600 dark:text-red-400",
|
||||
"twui-button-error-ghost",
|
||||
);
|
||||
if (color == "warning")
|
||||
return twMerge(
|
||||
"bg-transparent outline-none p-2",
|
||||
"text-yellow-600",
|
||||
"twui-button-warning-ghost",
|
||||
);
|
||||
if (color == "success")
|
||||
return twMerge(
|
||||
"bg-transparent outline-none p-2",
|
||||
"text-success",
|
||||
"twui-button-success-ghost",
|
||||
);
|
||||
if (color == "white")
|
||||
return twMerge(
|
||||
"bg-transparent outline-none p-2",
|
||||
"text-white",
|
||||
"twui-button-white-ghost",
|
||||
);
|
||||
}
|
||||
|
||||
return "";
|
||||
})();
|
||||
const finalClassName = buttonClasses[variant || "normal"]?.[color || "primary"] ?? "";
|
||||
|
||||
const buttonComponent = (
|
||||
<button
|
||||
|
||||
Reference in New Issue
Block a user