54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
import React from "react";
|
|
import Link, { LinkProps } from "next/link";
|
|
|
|
type CommonProps = {
|
|
className?: string;
|
|
children?: React.ReactNode;
|
|
isPrimary?: boolean;
|
|
isSecondary?: boolean;
|
|
};
|
|
|
|
type ButtonAsButton = {
|
|
as?: "button";
|
|
} & React.ButtonHTMLAttributes<HTMLButtonElement>;
|
|
|
|
type ButtonAsAnchor = {
|
|
as: "a";
|
|
} & React.AnchorHTMLAttributes<HTMLAnchorElement>;
|
|
|
|
type ButtonAsLink = {
|
|
as: "link";
|
|
} & LinkProps;
|
|
|
|
type ButtonProps = CommonProps &
|
|
(ButtonAsButton | ButtonAsAnchor | ButtonAsLink);
|
|
|
|
const Button: React.FC<ButtonProps> = ({
|
|
className,
|
|
children,
|
|
isPrimary,
|
|
isSecondary,
|
|
as = "button",
|
|
...props
|
|
}) => {
|
|
const isLink = as === "link";
|
|
const Component: React.ElementType = isLink ? Link : as;
|
|
|
|
return (
|
|
<Component
|
|
className={`relative inline-flex justify-center items-center h-10 px-3.5 rounded-lg text-title-5 cursor-pointer transition-all ${
|
|
isPrimary ? "bg-white text-black hover:bg-white/90" : ""
|
|
} ${
|
|
isSecondary
|
|
? "shadow-[0.0625rem_0.0625rem_0.0625rem_0_rgba(255,255,255,0.10)_inset] text-white after:absolute after:inset-0 after:border after:border-line after:rounded-lg after:pointer-events-none after:transition-colors hover:after:border-white"
|
|
: ""
|
|
} ${className || ""}`}
|
|
{...(isLink ? (props as LinkProps) : props)}
|
|
>
|
|
{children}
|
|
</Component>
|
|
);
|
|
};
|
|
|
|
export default Button;
|