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

addressed James's comments

Browse Source
This commit is contained in:
ingawei 2022-07-21 18:17:43 -07:00
parent 706ca5a561
commit 6f6123eb2c
2 changed files with 77 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
web/components/manalink-card.tsx
View File

@ -27,49 +27,45 @@ export function ManalinkCard(props: {
const { expiresTime, maxUses, uses, amount, message } = info const { expiresTime, maxUses, uses, amount, message } = info
return ( return (
<Col> <Col>
<Col> <Col
<div className={clsx(
className={clsx( className,
className, 'min-h-20 group rounded-lg bg-gradient-to-br drop-shadow-sm transition-all',
'min-h-20 group flex flex-col rounded-xl bg-gradient-to-br shadow-lg transition-all', getManalinkGradient(info.amount)
getManalinkGradient(info.amount) )}
)} >
> <Col className="mx-4 mt-2 -mb-4 text-right text-sm text-gray-100">
<Col className="mx-4 mt-2 -mb-4 text-right text-sm text-gray-100"> <div>
<div> {maxUses != null
{maxUses != null ? `${maxUses - uses}/${maxUses} uses left`
? `${maxUses - uses}/${maxUses} uses left` : `Unlimited use`}
: `Unlimited use`} </div>
</div> <div>
<div> {expiresTime != null
{expiresTime != null ? `Expires ${fromNow(expiresTime)}`
? `Expires ${fromNow(expiresTime)}` : 'Never expires'}
: 'Never expires'} </div>
</div> </Col>
</Col>
<img <img
className={clsx(
'block h-1/3 w-1/3 self-center transition-all group-hover:rotate-12',
preview ? 'my-2' : 'w-1/2 md:mb-6 md:h-1/2'
)}
src="/logo-white.svg"
/>
<Row className="rounded-b-lg bg-white p-4">
<div
className={clsx( className={clsx(
'block h-1/3 w-1/3 self-center transition-all group-hover:rotate-12', 'mb-1 text-xl text-indigo-500',
preview ? 'my-2' : 'w-1/2 md:mb-6 md:h-1/2' getManalinkAmountColor(amount)
)} )}
src="/logo-white.svg" >
/> {formatMoney(amount)}
<Row className="rounded-b-xl bg-white p-4"> </div>
<Col> </Row>
<div
className={clsx(
'mb-1 text-xl text-indigo-500',
getManalinkAmountColor(amount)
)}
>
{formatMoney(amount)}
</div>
</Col>
</Row>
</div>
</Col> </Col>
<div className="text-md mx-4 mt-2 mb-4 text-gray-500">{message}</div> <div className="text-md mt-2 mb-4 text-gray-500">{message}</div>
</Col> </Col>
) )
} }
@ -81,7 +77,7 @@ export function ManalinkCardFromView(props: {
}) { }) {
const { className, link, highlightedSlug } = props const { className, link, highlightedSlug } = props
const { message, amount, expiresTime, maxUses, claims } = link const { message, amount, expiresTime, maxUses, claims } = link
const [details, setDetails] = useState(false) const [showDetails, setShowDetails] = useState(false)
return ( return (
<Col> <Col>
@ -92,14 +88,14 @@ export function ManalinkCardFromView(props: {
link.slug === highlightedSlug ? 'shadow-md shadow-indigo-400' : '' link.slug === highlightedSlug ? 'shadow-md shadow-indigo-400' : ''
)} )}
> >
<div <Col
className={clsx( className={clsx(
'relative flex flex-col rounded-t-lg bg-gradient-to-br transition-all', 'relative rounded-t-lg bg-gradient-to-br transition-all',
getManalinkGradient(link.amount) getManalinkGradient(link.amount)
)} )}
onClick={() => setDetails(!details)} onClick={() => setShowDetails(!showDetails)}
> >
{details && ( {showDetails && (
<ClaimsList <ClaimsList
className="absolute h-full w-full bg-white opacity-90" className="absolute h-full w-full bg-white opacity-90"
link={link} link={link}
@ -121,40 +117,38 @@ export function ManalinkCardFromView(props: {
className={clsx('my-auto block w-1/3 select-none self-center py-3')} className={clsx('my-auto block w-1/3 select-none self-center py-3')}
src="/logo-white.svg" src="/logo-white.svg"
/> />
</div>
<Col className="w-full rounded-b-lg bg-white px-4 py-2 text-lg">
<Row className="relative gap-1">
<div
className={clsx(
'my-auto mb-1 w-full',
getManalinkAmountColor(amount)
)}
>
{formatMoney(amount)}
</div>
<ShareIconButton
toastClassName={'-left-48 min-w-[250%]'}
buttonClassName={'transition-colors'}
onCopyButtonClassName={
'bg-gray-200 text-gray-600 transition-none hover:bg-gray-200 hover:text-gray-600'
}
copyPayload={getManalinkUrl(link.slug)}
/>
<button
onClick={() => setDetails(!details)}
className={clsx(
contractDetailsButtonClassName,
details
? 'bg-gray-200 text-gray-600 hover:bg-gray-200 hover:text-gray-600'
: ''
)}
>
<DotsHorizontalIcon className="h-[24px] w-5" />
</button>
</Row>
</Col> </Col>
<Row className="relative w-full gap-1 rounded-b-lg bg-white px-4 py-2 text-lg">
<div
className={clsx(
'my-auto mb-1 w-full',
getManalinkAmountColor(amount)
)}
>
{formatMoney(amount)}
</div>
<ShareIconButton
toastClassName={'-left-48 min-w-[250%]'}
buttonClassName={'transition-colors'}
onCopyButtonClassName={
'bg-gray-200 text-gray-600 transition-none hover:bg-gray-200 hover:text-gray-600'
}
copyPayload={getManalinkUrl(link.slug)}
/>
<button
onClick={() => setShowDetails(!showDetails)}
className={clsx(
contractDetailsButtonClassName,
showDetails
? 'bg-gray-200 text-gray-600 hover:bg-gray-200 hover:text-gray-600'
: ''
)}
>
<DotsHorizontalIcon className="h-[24px] w-5" />
</button>
</Row>
</Col> </Col>
<div className="mx-4 mt-2 mb-4 text-xs text-gray-500 md:text-sm"> <div className="mt-2 mb-4 text-xs text-gray-500 md:text-sm">
{message || ''} {message || ''}
</div> </div>
</Col> </Col>

15
web/pages/links.tsx
View File

@ -98,14 +98,13 @@ function ManalinksDisplay(props: {
return ( return (
<> <>
<Col className="grid w-full gap-4 md:grid-cols-2"> <Col className="grid w-full gap-4 md:grid-cols-2">
{displayedLinks.map((link) => { {displayedLinks.map((link) => (
return ( <ManalinkCardFromView
<ManalinkCardFromView key={link.slug + link.createdTime}
link={link} link={link}
highlightedSlug={highlightedSlug} highlightedSlug={highlightedSlug}
/> />
) ))}
})}
</Col> </Col>
<Pagination <Pagination
page={page} page={page}