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' import { User } from 'web/lib/firebase/users' import { Button } from './button' export type ManalinkInfo = { expiresTime: number | null maxUses: number | null uses: number amount: number message: string } export function ManalinkCard(props: { user: User | null | undefined className?: string info: ManalinkInfo isClaiming: boolean onClaim?: () => void }) { const { user, className, 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}
) } export function ManalinkCardPreview(props: { className?: string info: ManalinkInfo }) { const { className, 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}
) }