57 lines
1.3 KiB
TypeScript
57 lines
1.3 KiB
TypeScript
import { ArrowIcon } from "@/components/shared/icons/ArrowIcon";
|
|
|
|
type ButtonVariant =
|
|
| "solid"
|
|
| "outline"
|
|
| "gradient-border"
|
|
| "gradient-fill"
|
|
| "simple";
|
|
|
|
interface tenextButtonProps {
|
|
href?: string;
|
|
variant?: ButtonVariant;
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
showArrow?: boolean;
|
|
target?: string;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export function tenextButton({
|
|
href = "#",
|
|
variant = "solid",
|
|
children,
|
|
className = "",
|
|
showArrow = true,
|
|
target,
|
|
onClick,
|
|
}: tenextButtonProps) {
|
|
const baseClasses = "tenext-button";
|
|
|
|
const variantClasses: Record<ButtonVariant, string> = {
|
|
solid: "tenext-button-solid",
|
|
outline: "tenext-button-solid",
|
|
"gradient-border": "tenext-button-gradient-border",
|
|
"gradient-fill": "tenext-button-gradient-fill",
|
|
simple: "",
|
|
};
|
|
|
|
const combined = `${baseClasses} ${variantClasses[variant]} ${className}`;
|
|
|
|
return (
|
|
<a
|
|
href={href}
|
|
target={target}
|
|
className={combined}
|
|
onClick={onClick}
|
|
rel={target === "_blank" ? "noopener noreferrer" : undefined}
|
|
>
|
|
{children}
|
|
{showArrow && <ArrowIcon className="w-3 h-3" />}
|
|
{(variant === "gradient-border" || variant === "gradient-fill") && (
|
|
<span className="button-inner" />
|
|
)}
|
|
</a>
|
|
);
|
|
}
|