80 lines
1.9 KiB
TypeScript
80 lines
1.9 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";
|
|
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];
|
|
|
|
return (
|
|
<Component
|
|
className={`block cursor-pointer text-white rounded-xl font-semibold shadow-2xl transition-all duration-300 hover:scale-105
|
|
bg-gradient-to-r ${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",
|
|
};
|
|
|
|
const colors = {
|
|
primary: {
|
|
from: "from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500",
|
|
to: "to-emerald-600 hover:to-emerald-500",
|
|
},
|
|
glass: {
|
|
from: "from-white/15 via-white/8 to-white/12",
|
|
to: "to-white/15 hover:to-white/10",
|
|
},
|
|
rose: {
|
|
from: "from-rose-600/90 hover:from-rose-500/90",
|
|
to: "to-pink-600/90 hover:to-pink-500/90",
|
|
},
|
|
emerald: {
|
|
from: "from-emerald-600/90 hover:from-emerald-500/90",
|
|
to: "to-teal-600/90 hover:to-teal-500/90",
|
|
},
|
|
purple: {
|
|
from: "from-purple-600/90 hover:from-purple-500/90",
|
|
to: "to-pink-600/90 hover:to-pink-500/90",
|
|
},
|
|
pink: {
|
|
from: "from-pink-600/90 hover:from-pink-500/90",
|
|
to: "to-emerald-600/90 hover:to-emerald-500/90",
|
|
},
|
|
teal: {
|
|
from: "from-teal-600/90 hover:from-teal-500/90",
|
|
to: "to-emerald-600/90 hover:to-emerald-500/90",
|
|
},
|
|
};
|