import clsx from 'clsx'
import { formatMoney } from 'common/util/format'
import { fromNow } from 'web/lib/util/time'
import { Col } from 'web/components/layout/col'
import { Row } from 'web/components/layout/row'
export type ManalinkInfo = {
expiresTime: number | null
maxUses: number | null
uses: number
amount: number
message: string
}
export function ManalinkCard(props: {
className?: string
info: ManalinkInfo
defaultMessage: string
isClaiming: boolean
onClaim?: () => void
}) {
const { className, defaultMessage, isClaiming, info, onClaim } = props
const { expiresTime, maxUses, uses, amount, message } = info
return (
{maxUses != null
? `${maxUses - uses}/${maxUses} uses left`
: `Unlimited use`}
{expiresTime != null
? `Expires ${fromNow(expiresTime)}`
: 'Never expires'}
{formatMoney(amount)}
{message || defaultMessage}
)
}
export function ManalinkCardPreview(props: {
className?: string
info: ManalinkInfo
defaultMessage: string
}) {
const { className, defaultMessage, info } = props
const { expiresTime, maxUses, uses, amount, message } = info
return (
{maxUses != null
? `${maxUses - uses}/${maxUses} uses left`
: `Unlimited use`}
{expiresTime != null
? `Expires ${fromNow(expiresTime)}`
: 'Never expires'}
{formatMoney(amount)}
{message || defaultMessage}
)
}