34 lines
1.0 KiB
TypeScript
34 lines
1.0 KiB
TypeScript
import { ReactNode } from "react"
|
|
|
|
export type ButtonProps = { children?: ReactNode, border?: boolean, invertColors?: boolean, href?: string, onClick?: React.MouseEventHandler<HTMLAnchorElement>, className?: string }
|
|
|
|
export default function Button({ children, border, invertColors, href, onClick, className }: ButtonProps) {
|
|
return <a
|
|
onClick={onClick}
|
|
className={`
|
|
rounded-full
|
|
border
|
|
border-solid
|
|
transition-colors
|
|
flex
|
|
items-center
|
|
justify-center
|
|
text-xl
|
|
sm:text-2xl
|
|
h-10
|
|
sm:h-12
|
|
px-4
|
|
sm:px-5
|
|
sm:min-w-44
|
|
hover:cursor-pointer
|
|
${border ? "border-black/[.08] dark:border-white/[.145]" : "border-transparent"}
|
|
${invertColors ? "bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc]": "hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent"}
|
|
${className || ""}
|
|
`}
|
|
href={href}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
{ children }
|
|
</a>
|
|
} |