41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import {
|
|
FontAwesomeIcon,
|
|
FontAwesomeIconProps,
|
|
} from "@fortawesome/react-fontawesome"
|
|
import classNames from "classnames"
|
|
|
|
function OptionButton({
|
|
id,
|
|
icon,
|
|
callback,
|
|
node,
|
|
disabled,
|
|
}: {
|
|
id: string
|
|
icon: FontAwesomeIconProps["icon"]
|
|
callback?: () => void
|
|
node?: JSX.Element
|
|
disabled?: boolean
|
|
}) {
|
|
return (
|
|
<button
|
|
className={classNames(
|
|
"flex w-full flex-row items-center justify-between rounded-xl py-2 pl-8 pr-4 text-lg text-grayish duration-100 first:mt-4 last:mt-4 sm:py-4 sm:pl-16 sm:pr-8 sm:text-4xl sm:first:mt-8 sm:last:mt-8",
|
|
!disabled
|
|
? "border-b-4 border-shield-gray bg-voidDark active:border-b-0 active:border-t-4"
|
|
: "border-4 border-dashed border-slate-600 bg-red-950"
|
|
)}
|
|
onClick={() => callback && setTimeout(callback, 200)}
|
|
disabled={disabled}
|
|
title={!disabled ? "" : "Please login"}
|
|
>
|
|
<span className="mx-auto">{node ? node : id}</span>
|
|
<FontAwesomeIcon
|
|
className="ml-2 w-10 text-xl sm:ml-12 sm:text-4xl"
|
|
icon={icon}
|
|
/>
|
|
</button>
|
|
)
|
|
}
|
|
|
|
export default OptionButton
|