mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 21:27:06 +04:00
58 lines
2.2 KiB
Plaintext
58 lines
2.2 KiB
Plaintext
---
|
|
import { assetRoot } from '@shared/lib/assets'
|
|
import type { Person } from '@shared/lib/people'
|
|
import Icon from './Icon.astro'
|
|
import { firstLetters } from '@shared/lib/string-format'
|
|
|
|
import type { AvatarSize } from '@shared/lib/tokens'
|
|
|
|
/** re-exported for callers; generated from the `$avatar-sizes` SCSS map */
|
|
export type { AvatarSize }
|
|
|
|
interface Props {
|
|
src?: string
|
|
placeholder?: string | undefined
|
|
/** person object (photo → src, initials → placeholder); resolve demo ids with personById() from @shared/lib/people */
|
|
person?: Person | undefined
|
|
link?: boolean
|
|
/** href for the linked avatar (link); defaults to "#" when omitted */
|
|
href?: string
|
|
size?: AvatarSize | undefined
|
|
class?: string
|
|
/** avatar-{shape} (core/scss/ui/_avatars.scss) */
|
|
shape?: 'rounded' | 'square' | undefined
|
|
color?: string | undefined
|
|
status?: string
|
|
statusLabel?: string
|
|
brand?: string
|
|
icon?: string | undefined
|
|
/** asset URL base — defaults to assetRoot (@shared/lib/assets); pass '..' for pages one level deep (e.g. marketing/) */
|
|
base?: string
|
|
/** remaining attributes (data-bs-toggle for tooltips, aria-*, …) are forwarded to the element */
|
|
[key: string]: unknown
|
|
}
|
|
|
|
const { src: srcProp, placeholder: placeholderProp, person, link: linkProp = false, href: hrefProp, size, class: className, shape, color, status, statusLabel, brand, icon, base = assetRoot, ...rest } = Astro.props
|
|
|
|
let src = srcProp
|
|
let placeholder = placeholderProp
|
|
|
|
if (person) {
|
|
src = person.photo
|
|
if (!src) {
|
|
placeholder = firstLetters(person.full_name ?? '')
|
|
}
|
|
}
|
|
|
|
const El = linkProp ? 'a' : 'span'
|
|
const linkAttrs = linkProp ? { href: hrefProp ?? '#' } : {}
|
|
|
|
const classes = ['avatar', size && `avatar-${size}`, className, shape && `avatar-${shape}`, color && `bg-${color}-lt`]
|
|
---
|
|
|
|
<El {...linkAttrs} class:list={classes} style={src ? `background-image: url(${base}/${src})` : undefined} {...rest}
|
|
>{status && <span class={`badge bg-${status}`} role={statusLabel ? 'img' : undefined} aria-label={statusLabel} />}{brand && <span class="avatar-brand" style={`background-image: url(${base}/static/brands/${brand}.svg);`} />}{
|
|
src ? null : placeholder ? placeholder : icon ? <Icon name={icon} /> : <Icon name="user" />
|
|
}</El
|
|
>
|