Avatar

'use client'

import * as Headless from '@headlessui/react'
import clsx from 'clsx'
import React, { forwardRef, useState } from 'react'
import { TouchTarget } from './button'
import { Link } from './link'

type AvatarProps = {
  src?: string | null
  square?: boolean
  initials?: string
  alt?: string
  className?: string
}

const base = [
  'inline-grid *:col-start-1 *:row-start-1 shrink-0 align-middle',
  '[--avatar-radius:20%] outline outline-black/10 dark:outline-white/10 -outline-offset-1',
]

const shapes = {
  square: '*:rounded-(--avatar-radius) rounded-(--avatar-radius)',
  round: '*:rounded-full rounded-full',
}

const initialsStyles = 'size-full p-[5%] fill-current font-medium uppercase text-[48px] select-none'

export function Avatar({
  src = null,
  square = false,
  initials,
  alt = '',
  className,
  ...props
}: AvatarProps & React.ComponentPropsWithoutRef<'span'>) {
  let [failedSrc, setFailedSrc] = useState<string | null>(null)
  let showImage = Boolean(src) && src !== failedSrc
  let namedInitials = Boolean(alt) && !showImage

  return (
    <span
      data-slot="avatar"
      {...(!showImage && !initials && alt ? { role: 'img', 'aria-label': alt } : {})}
      {...props}
      className={clsx(className, base, shapes[square ? 'square' : 'round'])}
    >
      {initials && (
        <svg
          className={initialsStyles}
          viewBox="0 0 100 100"
          role={namedInitials ? 'img' : undefined}
          aria-hidden={namedInitials ? undefined : 'true'}
        >
          {namedInitials && <title>{alt}</title>}
          <text x="50%" y="50%" alignmentBaseline="middle" dominantBaseline="middle" textAnchor="middle" dy=".125em">
            {initials}
          </text>
        </svg>
      )}
      {showImage && (
        <img
          className="size-full"
          src={src!}
          alt={alt}
          ref={(image) => {
            if (image?.complete && image.naturalWidth === 0) setFailedSrc(src)
          }}
          onError={() => setFailedSrc(src)}
        />
      )}
    </span>
  )
}

const focusRing = 'focus:not-data-focus:outline-hidden data-focus:outline-2 data-focus:outline-offset-2 data-focus:outline-accent-500'

type AvatarButtonProps = AvatarProps &
  ({ alt: string } | { 'aria-label': string } | { 'aria-labelledby': string }) &
  (
    | ({ href?: never } & Omit<Headless.ButtonProps, 'as' | 'className'>)
    | ({ href: string } & Omit<React.ComponentPropsWithoutRef<typeof Link>, 'className'>)
  )

export const AvatarButton = forwardRef(function AvatarButton(
  { src, square = false, initials, alt, className, ...props }: AvatarButtonProps,
  ref: React.ForwardedRef<HTMLButtonElement>
) {
  let classes = clsx(className, 'relative inline-grid', square ? 'rounded-[20%]' : 'rounded-full', focusRing)
  let avatar = (
    <TouchTarget>
      <Avatar src={src} square={square} initials={initials} alt={alt} />
    </TouchTarget>
  )

  return typeof props.href === 'string' ? (
    <Link {...props} className={classes} ref={ref as React.ForwardedRef<HTMLAnchorElement>}>
      {avatar}
    </Link>
  ) : (
    <Headless.Button {...props} className={classes} ref={ref}>
      {avatar}
    </Headless.Button>
  )
})

<script setup lang="ts">
import { computed, ref, useTemplateRef, watch } from 'vue'

const props = withDefaults(
  defineProps<{
    src?: string | null
    square?: boolean
    initials?: string
    alt?: string
  }>(),
  { src: null, square: false, alt: '' }
)

const base = [
  'inline-grid *:col-start-1 *:row-start-1 shrink-0 align-middle',
  '[--avatar-radius:20%] outline outline-black/10 dark:outline-white/10 -outline-offset-1',
]

const shapes = {
  square: '*:rounded-(--avatar-radius) rounded-(--avatar-radius)',
  round: '*:rounded-full rounded-full',
}

const initialsStyles = 'size-full p-[5%] fill-current font-medium uppercase text-[48px] select-none'

const failedSrc = ref<string | null>(null)
const showImage = computed(() => Boolean(props.src) && props.src !== failedSrc.value)
const namedInitials = computed(() => Boolean(props.alt) && !showImage.value)
const image = useTemplateRef<HTMLImageElement>('image')

watch(
  [image, () => props.src],
  ([element]) => {
    if (element?.complete && element.naturalWidth === 0) failedSrc.value = props.src
  },
  { flush: 'post' }
)
</script>

<template>
  <span
    data-slot="avatar"
    :role="!showImage && !initials && alt ? 'img' : undefined"
    :aria-label="!showImage && !initials && alt ? alt : undefined"
    :class="[base, shapes[square ? 'square' : 'round']]"
  >
    <svg
      v-if="initials"
      :class="initialsStyles"
      viewBox="0 0 100 100"
      :role="namedInitials ? 'img' : undefined"
      :aria-hidden="namedInitials ? undefined : 'true'"
    >
      <title v-if="namedInitials">{{ alt }}</title>
      <text x="50%" y="50%" alignment-baseline="middle" dominant-baseline="middle" text-anchor="middle" dy=".125em">
        {{ initials }}
      </text>
    </svg>
    <img v-if="showImage" ref="image" class="size-full" :src="src!" :alt="alt" @error="failedSrc = src" />
  </span>
</template>