AUserPreview.vue

<template>
  <div
    class="tw-pl-14 tw-p-1 tw-flex-1 tw-text-sm tw-rounded-full tw-h-12 tw-flex tw-items-center tw-justify-between tw-relative tw-overflow-hidden"
  >
    <AAvatar
      :text="nameData.initials"
      class="tw-absolute tw-inset-y-0 tw-left-0 tw-aspect-square tw-rounded-full"
    />

    <span>
      <span class="tw-block tw-font-semibold">{{ nameData.name || nameData.username }}</span>
      <span v-if="nameData.name" class="tw-text-opacity-75" :data-testid="testId">
        {{ nameData.username }}
      </span>
    </span>

    <slot />
  </div>
</template>

<script lang="ts" setup>
import { usePersonName } from '@/util'
import { SteeringUser } from '@/stores/auth'
import AAvatar from '@/components/generic/AAvatar.vue'

defineOptions({ compatConfig: { MODE: 3 } })

const props = defineProps<{
  user: SteeringUser
  testId?: string
}>()

const nameData = usePersonName(() => props.user)
</script>