manifold/web/components/button.tsx
Austin Chen c9229ca2b8
Allow users to create new contracts (#4)
* Add Firestore package and config

* Upload basic Firebase Auth code

* Basic ability to sign in and view profile

* Move html head content to Next's _document

* Apply dark theme to all DaisyUI components

* Add contract page

* Smaller width bet input

* Allow users to create new contracts

* Add back listenForContract

* Add some buttons

* Add Row, Col, and Spacer components

* Implement skeleton ContractPage

* Apply dark theme to all DaisyUI components

* Fix hooks lints (#3)

* Add background to bet panel

* Sort contracts by creation time

* Link to market creation from header

* List your markets on account page

* Set fullscreen black background

* Correctly set seeds on new contracts

* Code cleanups

* Gratuitously cool font

* Add creator name, fix ordering

* Use Readex Pro as body font

* Fixes according to code review

Co-authored-by: jahooma <jahooma@gmail.com>
2021-12-10 09:54:16 -08:00

33 lines
970 B
TypeScript

export function Button(props: {
className?: string
onClick?: () => void
color: 'green' | 'red' | 'deemphasized'
hideFocusRing?: boolean
children?: any
}) {
const { className, onClick, children, color, hideFocusRing } = props
return (
<button
type="button"
className={classNames(
'inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white',
!hideFocusRing && 'focus:outline-none focus:ring-2 focus:ring-offset-2',
color === 'green' &&
'bg-green-500 hover:bg-green-600 focus:ring-green-500',
color === 'red' && 'bg-red-500 hover:bg-red-600 focus:ring-red-500',
color === 'deemphasized' &&
'bg-transparent hover:bg-gray-500 focus:ring-gray-400',
className
)}
onClick={onClick}
>
{children}
</button>
)
}
function classNames(...classes: any[]) {
return classes.filter(Boolean).join(' ')
}