76 lines
1.9 KiB
TypeScript
76 lines
1.9 KiB
TypeScript
import { useRouter } from "next/router";
|
|
import { MouseEventHandler } from "react";
|
|
|
|
interface Props {
|
|
id?: string;
|
|
className?: string;
|
|
href?: string;
|
|
children: React.ReactNode;
|
|
active?: boolean;
|
|
locale?: string;
|
|
target?: "_blank";
|
|
onClick?: MouseEventHandler<HTMLDivElement>;
|
|
draggable?: boolean;
|
|
badgeNumber?: number;
|
|
}
|
|
|
|
export default function Button(props: Props): JSX.Element {
|
|
const {
|
|
draggable,
|
|
id,
|
|
onClick,
|
|
active,
|
|
className,
|
|
children,
|
|
target,
|
|
href,
|
|
locale,
|
|
badgeNumber,
|
|
} = props;
|
|
const router = useRouter();
|
|
|
|
const button = (
|
|
<div
|
|
draggable={draggable}
|
|
id={id}
|
|
onClick={onClick}
|
|
className={`grid place-content-center place-items-center border-[1px]
|
|
border-dark text-dark rounded-full px-4 pt-[0.4rem] pb-[0.5rem]
|
|
transition-all select-none hover:[--opacityBadge:0] --opacityBadge:100 ${className} ${
|
|
active
|
|
? "text-light bg-black drop-shadow-black-lg !border-black cursor-not-allowed"
|
|
: "cursor-pointer hover:text-light hover:bg-dark hover:drop-shadow-shade-lg active:bg-black active:text-light active:drop-shadow-black-lg active:border-black"
|
|
}`}
|
|
>
|
|
{badgeNumber && (
|
|
<div className="opacity-[var(--opacityBadge)] transition-opacity grid place-items-center absolute -top-3 -right-2 bg-dark w-8 h-8 text-light font-bold rounded-full">
|
|
{badgeNumber}
|
|
</div>
|
|
)}
|
|
{children}
|
|
</div>
|
|
);
|
|
|
|
if (target) {
|
|
return (
|
|
<a href={href} target={target} rel="noreferrer">
|
|
<div className="relative">{button}</div>
|
|
</a>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="relative"
|
|
onClick={() => {
|
|
if (href || locale)
|
|
router.push(href ?? router.asPath, href, {
|
|
locale: locale,
|
|
});
|
|
}}
|
|
>
|
|
{button}
|
|
</div>
|
|
);
|
|
}
|