import clsx from 'clsx' import React from 'react' import { formatMoney } from 'common/util/format' import { Col } from './layout/col' import { Row } from './layout/row' export function YesNoSelector(props: { selected?: 'YES' | 'NO' onSelect: (selected: 'YES' | 'NO') => void className?: string btnClassName?: string replaceYesButton?: React.ReactNode replaceNoButton?: React.ReactNode }) { const { selected, onSelect, className, btnClassName, replaceNoButton, replaceYesButton, } = props const commonClassNames = 'inline-flex flex-1 items-center justify-center rounded-3xl border-2 p-2' return ( {replaceYesButton ? ( replaceYesButton ) : ( )} {replaceNoButton ? ( replaceNoButton ) : ( )} ) } export function YesNoCancelSelector(props: { selected: 'YES' | 'NO' | 'MKT' | 'CANCEL' | undefined onSelect: (selected: 'YES' | 'NO' | 'MKT' | 'CANCEL') => void className?: string btnClassName?: string }) { const { selected, onSelect } = props const btnClassName = clsx('px-6 flex-1 rounded-3xl', props.btnClassName) return ( {/* Should ideally use a radio group instead of buttons */} ) } export function ChooseCancelSelector(props: { selected: 'CHOOSE' | 'CHOOSE_MULTIPLE' | 'CANCEL' | undefined onSelect: (selected: 'CHOOSE' | 'CHOOSE_MULTIPLE' | 'CANCEL') => void className?: string btnClassName?: string }) { const { selected, onSelect, className } = props const btnClassName = clsx('px-6 flex-1', props.btnClassName) return ( ) } const fundAmounts = [1000, 2500, 10000] export function FundsSelector(props: { selected: 1000 | 2500 | 10000 onSelect: (selected: 1000 | 2500 | 10000) => void className?: string btnClassName?: string }) { const { selected, onSelect, className } = props const btnClassName = clsx('!px-2 whitespace-nowrap', props.btnClassName) return ( {fundAmounts.map((amount) => ( ))} ) } export function BuyButton(props: { className?: string; onClick?: () => void }) { const { className, onClick } = props // Note: styles coppied from YesNoSelector return ( ) } function Button(props: { className?: string onClick?: () => void color: 'green' | 'red' | 'blue' | 'yellow' | 'gray' children?: any }) { const { className, onClick, children, color } = props return ( ) }