import { linkClass, SiteLink } from 'web/components/site-link'
import clsx from 'clsx'
import { Row } from 'web/components/layout/row'
import { Modal } from 'web/components/layout/modal'
import { Col } from 'web/components/layout/col'
import { useState } from 'react'
import { Avatar } from 'web/components/avatar'
import { formatMoney } from 'common/util/format'
function shortenName(name: string) {
const firstName = name.split(' ')[0]
const maxLength = 10
const shortName =
firstName.length >= 4
? firstName.length < maxLength
? firstName
: firstName.substring(0, maxLength - 3) + '...'
: name.length > maxLength
? name.substring(0, maxLength) + '...'
: name
return shortName
}
export function UserLink(props: {
name: string
username: string
className?: string
short?: boolean
}) {
const { name, username, className, short } = props
const shortName = short ? shortenName(name) : name
return (
{shortName}
)
}
export type MultiUserLinkInfo = {
name: string
username: string
avatarUrl: string | undefined
amountTipped: number
}
export function MultiUserTipLink(props: {
userInfos: MultiUserLinkInfo[]
className?: string
}) {
const { userInfos, className } = props
const [open, setOpen] = useState(false)
const maxShowCount = 2
return (
<>
{
e.stopPropagation()
setOpen(true)
}}
>
{userInfos.map((userInfo, index) =>
index < maxShowCount ? (
{shortenName(userInfo.name) +
(index < maxShowCount - 1 ? ', ' : '')}
) : (
& {userInfos.length - maxShowCount} more
)
)}
Who tipped you
{userInfos.map((userInfo) => (
+{formatMoney(userInfo.amountTipped)}
))}
>
)
}