open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Put sharing qr code in modal

Browse Source
This commit is contained in:
Ian Philips 2022-08-04 15:24:25 -06:00
parent 88c6c1f793
commit 7e9031292b
1 changed files with 80 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
web/pages/challenges/index.tsx
View File

@ -27,6 +27,8 @@ import { Button } from 'web/components/button'
import { ClipboardCopyIcon, QrcodeIcon } from '@heroicons/react/outline'
import { copyToClipboard } from 'web/lib/util/copy'
import toast from 'react-hot-toast'
import { Modal } from 'web/components/layout/modal'
import { QRCode } from 'web/components/qr-code'
dayjs.extend(customParseFormat)
const columnClass = 'sm:px-5 px-2 py-3.5 max-w-[100px] truncate'
@ -107,79 +109,90 @@ function YourChallengesTable(props: { links: Challenge[] }) {
function YourLinkSummaryRow(props: { challenge: Challenge }) {
const { challenge } = props
const { acceptances } = challenge
const [open, setOpen] = React.useState(false)
const className = clsx(
'whitespace-nowrap text-sm hover:cursor-pointer text-gray-500 hover:bg-sky-50 bg-white'
)
return (
<tr id={challenge.slug} key={challenge.slug} className={className}>
<td className={amountClass}>
<SiteLink href={getChallengeUrl(challenge)}>
{formatMoney(challenge.creatorAmount)}
</SiteLink>
</td>
<td
className={clsx(
columnClass,
'text-center sm:max-w-[200px] sm:text-start'
)}
>
<Row className="items-center">
<Button
color="gray-white"
size="xs"
onClick={() => {
copyToClipboard(getChallengeUrl(challenge))
toast('Link copied to clipboard!')
}}
>
<ClipboardCopyIcon className={'h-5 w-5 sm:h-4 sm:w-4'} />
</Button>
<Button
color="gray-white"
size="xs"
onClick={() => {
const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=${200}x${200}&data=${getChallengeUrl(
challenge
)}`
window.location.href = qrUrl
}}
>
<QrcodeIcon className="h-5 w-5 sm:h-4 sm:w-4" />
</Button>
<SiteLink
href={getChallengeUrl(challenge)}
className={'mx-1 mb-1 hidden sm:inline-block'}
>
{`...${challenge.contractSlug}/${challenge.slug}`}
<>
<Modal open={open} setOpen={setOpen} size={'sm'}>
<Col
className={
'items-center justify-center gap-4 rounded-md bg-white p-8 py-8 '
}
>
<span className={'mb-4 text-center text-xl text-indigo-700'}>
Have your friend scan this to accept the challenge!
</span>
<QRCode url={getChallengeUrl(challenge)} />
</Col>
</Modal>
<tr id={challenge.slug} key={challenge.slug} className={className}>
<td className={amountClass}>
<SiteLink href={getChallengeUrl(challenge)}>
{formatMoney(challenge.creatorAmount)}
</SiteLink>
</Row>
</td>
<td className={columnClass}>
<Row className={'items-center justify-start gap-1'}>
{acceptances.length > 0 ? (
<>
<Avatar
username={acceptances[0].userUsername}
avatarUrl={acceptances[0].userAvatarUrl}
size={'sm'}
/>
<UserLink
name={acceptances[0].userName}
username={acceptances[0].userUsername}
/>
</>
) : (
<span>
No one -
{challenge.expiresTime &&
` (expires ${fromNow(challenge.expiresTime)})`}
</span>
</td>
<td
className={clsx(
columnClass,
'text-center sm:max-w-[200px] sm:text-start'
)}
</Row>
</td>
</tr>
>
<Row className="items-center gap-2">
<Button
color="gray-white"
size="xs"
onClick={() => {
copyToClipboard(getChallengeUrl(challenge))
toast('Link copied to clipboard!')
}}
>
<ClipboardCopyIcon className={'h-5 w-5 sm:h-4 sm:w-4'} />
</Button>
<Button
color="gray-white"
size="xs"
onClick={() => {
setOpen(true)
}}
>
<QrcodeIcon className="h-5 w-5 sm:h-4 sm:w-4" />
</Button>
<SiteLink
href={getChallengeUrl(challenge)}
className={'mx-1 mb-1 hidden sm:inline-block'}
>
{`...${challenge.contractSlug}/${challenge.slug}`}
</SiteLink>
</Row>
</td>
<td className={columnClass}>
<Row className={'items-center justify-start gap-1'}>
{acceptances.length > 0 ? (
<>
<Avatar
username={acceptances[0].userUsername}
avatarUrl={acceptances[0].userAvatarUrl}
size={'sm'}
/>
<UserLink
name={acceptances[0].userName}
username={acceptances[0].userUsername}
/>
</>
) : (
<span>
No one -
{challenge.expiresTime &&
` (expires ${fromNow(challenge.expiresTime)})`}
</span>
)}
</Row>
</td>
</tr>
</>
)
}