manifold/web/components/user-link.tsx
2022-10-06 21:52:55 -05:00

51 lines
1.2 KiB
TypeScript

import { SiteLink } from 'web/components/site-link'
import clsx from 'clsx'
export function shortenName(name: string) {
const firstName = name.split(' ')[0]
const maxLength = 11
const shortName =
firstName.length >= 3 && name.length > maxLength
? firstName.length < maxLength
? firstName
: firstName.substring(0, maxLength - 3) + '...'
: name.length > maxLength
? name.substring(0, maxLength - 3) + '...'
: name
return shortName
}
export function UserLink(props: {
name: string
username: string
className?: string
short?: boolean
noLink?: boolean
}) {
const { name, username, className, short, noLink } = props
const shortName = short ? shortenName(name) : name
return (
<SiteLink
href={`/${username}`}
className={clsx(
'z-10 truncate',
className,
noLink ? 'pointer-events-none' : ''
)}
>
{shortName}
{BOT_USERNAMES.includes(username) && <BotBadge />}
</SiteLink>
)
}
const BOT_USERNAMES = ['v', 'ArbitrageBot']
function BotBadge() {
return (
<span className="ml-1.5 inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-800">
Bot
</span>
)
}