Share embed button

This commit is contained in:
James Grugett 2022-03-21 15:23:21 -05:00
parent 0592909248
commit 4a617a4c07
3 changed files with 60 additions and 5 deletions

View File

@ -21,6 +21,7 @@ import { Spacer } from './layout/spacer'
import { useState } from 'react' import { useState } from 'react'
import { TweetButton } from './tweet-button' import { TweetButton } from './tweet-button'
import { getProbability } from '../../common/calculate' import { getProbability } from '../../common/calculate'
import { ShareEmbedButton } from './share-embed-button'
export function ContractCard(props: { export function ContractCard(props: {
contract: Contract contract: Contract
@ -172,9 +173,9 @@ function AbbrContractDetails(props: {
export function ContractDetails(props: { export function ContractDetails(props: {
contract: Contract contract: Contract
isCreator?: boolean isCreator?: boolean
hideTweetBtn?: boolean hideShareButtons?: boolean
}) { }) {
const { contract, isCreator, hideTweetBtn } = props const { contract, isCreator, hideShareButtons } = props
const { closeTime, creatorName, creatorUsername } = contract const { closeTime, creatorName, creatorUsername } = contract
const { liquidityLabel, createdDate, resolvedDate } = const { liquidityLabel, createdDate, resolvedDate } =
contractMetrics(contract) contractMetrics(contract)
@ -234,8 +235,11 @@ export function ContractDetails(props: {
<div className="whitespace-nowrap">{liquidityLabel}</div> <div className="whitespace-nowrap">{liquidityLabel}</div>
</Row> </Row>
{!hideTweetBtn && ( {!hideShareButtons && (
<>
<TweetButton className="self-end" tweetText={tweetText} /> <TweetButton className="self-end" tweetText={tweetText} />
<ShareEmbedButton contract={contract} />
</>
)} )}
</Row> </Row>
</Col> </Col>

View File

@ -0,0 +1,47 @@
import { Fragment } from 'react'
import { CodeIcon } from '@heroicons/react/outline'
import { Menu, Transition } from '@headlessui/react'
import { Contract } from '../../common/contract'
import { contractPath } from '../lib/firebase/contracts'
import { DOMAIN } from '../../common/envs/constants'
export function ShareEmbedButton(props: { contract: Contract }) {
const { contract } = props
const copyEmbed = () => {
const title = contract.question
const src = `https://${DOMAIN}/embed${contractPath(contract)}`
const embedCode = `<iframe width="560" height="405" src="${src}" title="${title}" frameborder="0"></iframe>`
if (navigator.clipboard) navigator.clipboard.writeText(embedCode)
}
return (
<Menu as="div" className="relative z-40 flex-shrink-0" onClick={copyEmbed}>
<Menu.Button
className="btn btn-xs btn-outline hover:bg-white hover:text-neutral"
onClick={copyEmbed}
>
<CodeIcon className="w-4 h-4 text-gray-500 mr-1.5" aria-hidden="true" />
Embed
</Menu.Button>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="absolute left-0 mt-2 w-40 origin-top-center rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<Menu.Item>
<div className="px-2 py-1">Embed code copied!</div>
</Menu.Item>
</Menu.Items>
</Transition>
</Menu>
)
}

View File

@ -100,7 +100,11 @@ function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
<Spacer h={3} /> <Spacer h={3} />
<Row className="items-center justify-between gap-4 px-2"> <Row className="items-center justify-between gap-4 px-2">
<ContractDetails contract={contract} isCreator={false} hideTweetBtn /> <ContractDetails
contract={contract}
isCreator={false}
hideShareButtons
/>
{(isBinary || resolution) && ( {(isBinary || resolution) && (
<ResolutionOrChance contract={contract} /> <ResolutionOrChance contract={contract} />