manifold/web/components/contract/share-row.tsx
Ian Philips a0402830c5
liking markets with tip/heart (#798)
* WIP liking markets with tip

* Refactor Userlink, add MultiUserLink

* Lint

* Lint

* Fix merge

* Fix imports

* wip liked contracts list

* Cache likes and liked by user ids on contract

* Refactor tip amount, reduce to M

* Move back to M

* Change positioning for large screens
2022-08-30 09:38:59 -06:00

74 lines
2.1 KiB
TypeScript
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import clsx from 'clsx'
import { ShareIcon } from '@heroicons/react/outline'
import { Row } from '../layout/row'
import { Contract } from 'web/lib/firebase/contracts'
import { useState } from 'react'
import { Button } from 'web/components/button'
import { CreateChallengeModal } from '../challenges/create-challenge-modal'
import { User } from 'common/user'
import { CHALLENGES_ENABLED } from 'common/challenge'
import { ShareModal } from './share-modal'
import { withTracking } from 'web/lib/service/analytics'
import { FollowMarketButton } from 'web/components/follow-market-button'
import { LikeMarketButton } from 'web/components/contract/like-market-button'
export function ShareRow(props: {
contract: Contract
user: User | undefined | null
}) {
const { user, contract } = props
const { outcomeType, resolution } = contract
const showChallenge =
user && outcomeType === 'BINARY' && !resolution && CHALLENGES_ENABLED
const [isOpen, setIsOpen] = useState(false)
const [isShareOpen, setShareOpen] = useState(false)
return (
<Row className="mt-0.5 sm:mt-2">
<Button
size="lg"
color="gray-white"
className={'flex'}
onClick={() => {
setShareOpen(true)
}}
>
<ShareIcon className={clsx('mr-2 h-[24px] w-5')} aria-hidden="true" />
Share
<ShareModal
isOpen={isShareOpen}
setOpen={setShareOpen}
contract={contract}
user={user}
/>
</Button>
{showChallenge && (
<Button
size="lg"
color="gray-white"
onClick={withTracking(
() => setIsOpen(true),
'click challenge button'
)}
>
Challenge
<CreateChallengeModal
isOpen={isOpen}
setOpen={setIsOpen}
user={user}
contract={contract}
/>
</Button>
)}
<FollowMarketButton contract={contract} user={user} />
<div className={'hidden sm:block'}>
<LikeMarketButton contract={contract} user={user} />
</div>
</Row>
)
}