97 lines
2.4 KiB
TypeScript
97 lines
2.4 KiB
TypeScript
import Link from "next/link";
|
|
import { FC } from "react";
|
|
|
|
type Theme = keyof typeof colors;
|
|
|
|
type Props = {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
theme?: Theme;
|
|
size?: "small" | "medium" | "large" | "icon";
|
|
onClick?: () => void;
|
|
href?: string;
|
|
gradient?: {
|
|
from: string;
|
|
to: string;
|
|
};
|
|
};
|
|
|
|
export const Button: FC<Props> = ({
|
|
children,
|
|
className = "",
|
|
onClick,
|
|
href,
|
|
size = "medium",
|
|
theme = "primary",
|
|
gradient,
|
|
}) => {
|
|
const Component = (href ? Link : "button") as any;
|
|
|
|
const buttonColor = gradient ?? colors[theme];
|
|
|
|
if (theme === "slate" && !className.includes("shadow-")) {
|
|
className += " shadow-cyan-500/20 hover:shadow-cyan-500/40";
|
|
}
|
|
|
|
return (
|
|
<Component
|
|
className={`flex items-center justify-center gap-2 cursor-pointer text-white rounded-xl font-semibold shadow-2xl transition-all duration-300
|
|
bg-gradient-to-br ${buttonColor?.from} ${buttonColor?.to} cursor-pointer ${sizes[size]} ${className}`}
|
|
onClick={onClick}
|
|
{...(href && { href })}
|
|
>
|
|
{children}
|
|
</Component>
|
|
);
|
|
};
|
|
|
|
const sizes = {
|
|
small: "px-4 py-2 text-sm",
|
|
medium: "px-8 py-4 text-lg",
|
|
large: "px-12 py-6 text-xl",
|
|
icon: "w-12 h-12 !rounded-full border border-white/20 hover:scale-105 [&>svg]:w-5 [&>svg]:h-5 shadow-lg ",
|
|
};
|
|
|
|
const colors = {
|
|
primary: {
|
|
from: "from-purple-600 hover:from-purple-500",
|
|
to: "to-emerald-600 hover:to-emerald-500",
|
|
},
|
|
secondary: {
|
|
from: "from-purple-600 hover:from-purple-500",
|
|
to: "to-cyan-600 hover:to-cyan-500",
|
|
},
|
|
glass: {
|
|
from: "from-white/15 border border-white/20",
|
|
to: "to-white/5 hover:to-white/10",
|
|
},
|
|
rosePink: {
|
|
from: "from-rose-600/90 hover:from-rose-500/90",
|
|
to: "to-pink-600/90 hover:to-pink-500/90",
|
|
},
|
|
emeraldTeal: {
|
|
from: "from-emerald-600/90 hover:from-emerald-500/90",
|
|
to: "to-teal-600/90 hover:to-teal-500/90",
|
|
},
|
|
purplePink: {
|
|
from: "from-purple-600/90 hover:from-purple-500/90",
|
|
to: "to-pink-600/90 hover:to-pink-500/90",
|
|
},
|
|
pinkEmerald: {
|
|
from: "from-pink-600/90 hover:from-pink-500/90",
|
|
to: "to-emerald-600/90 hover:to-emerald-500/90",
|
|
},
|
|
tealEmerald: {
|
|
from: "from-teal-600/90 hover:from-teal-500/90",
|
|
to: "to-emerald-600/90 hover:to-emerald-500/90",
|
|
},
|
|
cyanPurple: {
|
|
from: "from-cyan-600/90 hover:from-cyan-500/90",
|
|
to: "to-purple-600/90 hover:to-purple-500/90",
|
|
},
|
|
slate: {
|
|
from: "from-slate-800/95",
|
|
to: "to-slate-900/95",
|
|
},
|
|
};
|