41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import {
|
|
FontAwesomeIcon,
|
|
FontAwesomeIconProps,
|
|
} from "@fortawesome/react-fontawesome"
|
|
import classNames from "classnames"
|
|
import { ReactNode } from "react"
|
|
|
|
function OptionButton({
|
|
icon,
|
|
action,
|
|
children,
|
|
disabled,
|
|
}: {
|
|
icon: FontAwesomeIconProps["icon"]
|
|
action?: () => void
|
|
children: ReactNode
|
|
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",
|
|
{
|
|
"bg-voidDark border-shield-gray border-b-4 active:border-b-0 active:border-t-4":
|
|
!disabled,
|
|
"bg-red-950 border-slate-600 border-4 border-dashed": disabled,
|
|
}
|
|
)}
|
|
onClick={() => action && setTimeout(action, 200)}
|
|
disabled={disabled}
|
|
>
|
|
<span className="mx-auto">{children}</span>
|
|
<FontAwesomeIcon
|
|
className="ml-2 w-10 text-xl sm:ml-12 sm:text-4xl"
|
|
icon={icon}
|
|
/>
|
|
</button>
|
|
)
|
|
}
|
|
|
|
export default OptionButton
|