41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import { ReactNode } from "react";
|
|
|
|
interface ButtonProps {
|
|
children: ReactNode;
|
|
icon?: JSX.Element;
|
|
color?: "primary" | "secondary";
|
|
width?: "fit" | "full";
|
|
disabled?: boolean;
|
|
className?: string;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
function Button({
|
|
children,
|
|
color = "primary",
|
|
icon,
|
|
width = "fit",
|
|
disabled = false,
|
|
className,
|
|
onClick,
|
|
}: ButtonProps) {
|
|
return (
|
|
<button
|
|
disabled={disabled}
|
|
onClick={onClick}
|
|
className={`group relative px-6 py-2 rounded-full min-w-fit ${
|
|
(color === "primary" ? "bg-gradient" : "") ||
|
|
(color === "secondary" ? "outline outline-1 outline-[#3D425C]" : "")
|
|
} ${
|
|
icon ? "pr-4" : ""
|
|
} flex justify-between gap-1 items-center overflow-hidden w-${width} ${className}`}
|
|
>
|
|
<span className="group-hover:opacity-10 opacity-0 bg-black transition-opacity absolute top-0 left-0 w-full h-full"></span>
|
|
<span className="relative font-gilroy font-medium">{children}</span>
|
|
<span className="relative">{icon}</span>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
export default Button;
|