2022-05-03 21:20:14 -07:00
|
|
|
import { FunctionComponent, ReactNode } from 'react'
|
|
|
|
|
|
|
|
interface ButtonProps {
|
|
|
|
onClick?: (e?: React.MouseEvent) => void
|
|
|
|
disabled?: boolean
|
|
|
|
className?: string
|
2022-07-14 22:20:20 -07:00
|
|
|
secondary?: boolean
|
2022-05-03 21:20:14 -07:00
|
|
|
children?: ReactNode
|
|
|
|
}
|
|
|
|
|
|
|
|
const Button: FunctionComponent<ButtonProps> = ({
|
|
|
|
children,
|
|
|
|
onClick,
|
|
|
|
disabled = false,
|
|
|
|
className,
|
2022-07-14 22:20:20 -07:00
|
|
|
secondary,
|
2022-05-03 21:20:14 -07:00
|
|
|
...props
|
|
|
|
}) => {
|
|
|
|
return (
|
|
|
|
<button
|
|
|
|
onClick={onClick}
|
|
|
|
disabled={disabled}
|
2022-07-14 22:20:20 -07:00
|
|
|
className={`whitespace-nowrap rounded-md ${
|
|
|
|
secondary ? 'border border-th-bkg-button' : 'bg-th-bkg-button'
|
|
|
|
} px-6 py-2 font-bold drop-shadow-md
|
2022-07-15 04:09:23 -07:00
|
|
|
focus:outline-none disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:brightness-100 md:hover:brightness-[1.1] ${className}`}
|
2022-07-05 20:37:49 -07:00
|
|
|
{...props}
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</button>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2022-07-18 03:02:43 -07:00
|
|
|
interface IconButtonProps {
|
|
|
|
hideBg?: boolean
|
|
|
|
}
|
|
|
|
|
|
|
|
type IconButtonCombinedProps = ButtonProps & IconButtonProps
|
|
|
|
|
|
|
|
export const IconButton: FunctionComponent<IconButtonCombinedProps> = ({
|
2022-07-05 20:37:49 -07:00
|
|
|
children,
|
|
|
|
onClick,
|
|
|
|
disabled = false,
|
|
|
|
className,
|
2022-07-18 03:02:43 -07:00
|
|
|
hideBg,
|
2022-07-05 20:37:49 -07:00
|
|
|
...props
|
|
|
|
}) => {
|
|
|
|
return (
|
|
|
|
<button
|
|
|
|
onClick={onClick}
|
|
|
|
disabled={disabled}
|
2022-07-18 03:02:43 -07:00
|
|
|
className={`${className} flex h-7 w-7 items-center justify-center rounded-full ${
|
|
|
|
hideBg ? '' : 'bg-th-bkg-4'
|
|
|
|
} text-th-fgd-1 focus:outline-none disabled:cursor-not-allowed disabled:bg-th-bkg-4
|
2022-07-05 20:37:49 -07:00
|
|
|
disabled:text-th-fgd-4 md:hover:text-th-primary md:disabled:hover:text-th-fgd-4`}
|
2022-05-03 21:20:14 -07:00
|
|
|
{...props}
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</button>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2022-07-14 16:36:31 -07:00
|
|
|
export const LinkButton: FunctionComponent<ButtonProps> = ({
|
|
|
|
children,
|
|
|
|
onClick,
|
|
|
|
disabled = false,
|
|
|
|
className,
|
2022-07-14 22:20:20 -07:00
|
|
|
secondary,
|
2022-07-14 16:36:31 -07:00
|
|
|
...props
|
|
|
|
}) => {
|
|
|
|
return (
|
|
|
|
<button
|
|
|
|
onClick={onClick}
|
|
|
|
disabled={disabled}
|
|
|
|
className={`border-0 font-bold ${
|
2022-07-14 22:20:20 -07:00
|
|
|
secondary ? 'text-th-primary' : 'text-th-fgd-2'
|
2022-07-15 04:09:23 -07:00
|
|
|
} underline focus:outline-none disabled:cursor-not-allowed disabled:underline disabled:opacity-50 md:hover:no-underline ${className}`}
|
2022-07-14 16:36:31 -07:00
|
|
|
{...props}
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</button>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2022-05-03 21:20:14 -07:00
|
|
|
export default Button
|