perfil/nuxt4/app/components/MsnAvatar.vue

<template>
  <div class="msn-avatar-wrapper" :class="`status-${presenceStatus}`">
    <svg
      class="msn-frame"
      viewBox="0 0 140 140"
      xmlns="http://www.w3.org/2000/svg"
    >
      <!-- Definiciones -->
      <defs>
        <!-- Degradado radial para el marco (simula iluminación) -->
        <radialGradient
          id="frameGradient"
          cx="25%"
          cy="25%"
          r="100%"
          fx="15%"
          fy="15%"
        >
          <stop offset="0%" :stop-color="colors.light" />
          <stop offset="50%" :stop-color="colors.medium" />
          <stop offset="100%" :stop-color="colors.dark" />
        </radialGradient>

        <!-- Degradado para el highlight glossy -->
        <linearGradient
          id="glossHighlight"
          x1="0%"
          y1="0%"
          x2="0%"
          y2="100%"
        >
          <stop offset="0%" stop-color="rgba(255,255,255,0.6)" />
          <stop offset="40%" stop-color="rgba(255,255,255,0.2)" />
          <stop offset="60%" stop-color="rgba(255,255,255,0)" />
          <stop offset="100%" stop-color="rgba(0,0,0,0.1)" />
        </linearGradient>

        <!-- Filtro para sombra exterior -->
        <filter id="dropShadow" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
          <feOffset dx="0" dy="2" result="offsetblur" />
          <feComponentTransfer>
            <feFuncA type="linear" slope="0.3" />
          </feComponentTransfer>
          <feMerge>
            <feMergeNode />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>

        <!-- Filtro para sombra interior -->
        <filter id="innerShadow" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur" />
          <feOffset in="blur" dx="1" dy="1" result="offsetBlur" />
          <feFlood flood-color="rgba(0,0,0,0.4)" result="color" />
          <feComposite in="color" in2="offsetBlur" operator="in" result="shadow" />
          <feComposite in="shadow" in2="SourceAlpha" operator="in" result="innerShadow" />
        </filter>

        <!-- Clip path para el avatar (cuadrado con esquinas muy poco redondeadas) -->
        <clipPath id="avatarClip">
          <rect x="20" y="20" width="100" height="100" rx="3" ry="3" />
        </clipPath>

        <!-- Máscara para crear el marco con grosor variable -->
        <mask id="frameMask">
          <!-- Rectángulo exterior blanco -->
          <rect x="0" y="0" width="140" height="140" fill="white" rx="10" ry="10" />
          <!-- Rectángulo interior negro (el hueco del marco) -->
          <!-- Usamos un path personalizado para crear el grosor variable -->
          <path
            d="M 20,15
               Q 70,18 120,15
               Q 122,70 125,120
               Q 70,122 20,125
               Q 18,70 15,20
               Q 70,18 20,15 Z"
            fill="black"
          />
        </mask>
      </defs>

      <!-- Marco exterior con grosor variable -->
      <g filter="url(#dropShadow)">
        <!-- Base del marco con degradado radial -->
        <rect
          x="0"
          y="0"
          width="140"
          height="140"
          rx="10"
          ry="10"
          fill="url(#frameGradient)"
          mask="url(#frameMask)"
        />

        <!-- Capa glossy superior -->
        <rect
          x="0"
          y="0"
          width="140"
          height="140"
          rx="10"
          ry="10"
          fill="url(#glossHighlight)"
          mask="url(#frameMask)"
          opacity="0.8"
        />

        <!-- Highlight especular en la esquina superior izquierda -->
        <ellipse
          cx="25"
          cy="25"
          rx="15"
          ry="12"
          fill="rgba(255,255,255,0.7)"
          mask="url(#frameMask)"
          opacity="0.9"
        />
      </g>
    </svg>

    <!-- Avatar del usuario -->
    <div class="avatar-container">
      <img
        v-if="src"
        :src="src"
        :alt="alt"
        class="avatar-image"
        @error="handleImageError"
      />
      <div v-else class="avatar-placeholder">
        {{ initials }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { PresenceStatus } from '~/composables/usePresence'

interface Props {
  src?: string
  alt?: string
  presenceStatus?: PresenceStatus
  size?: number
}

const props = withDefaults(defineProps<Props>(), {
  presenceStatus: 'online',
  size: 128,
  alt: 'Avatar'
})

const imageError = ref(false)

// Calcular iniciales del nombre
const initials = computed(() => {
  if (!props.alt) return '?'
  const words = props.alt.split(' ').filter(w => w.length > 0)
  if (words.length >= 2) {
    return (words[0]![0]! + words[1]![0]!).toUpperCase()
  }
  return props.alt.slice(0, 2).toUpperCase()
})

const handleImageError = () => {
  imageError.value = true
}

// Computed para colores basados en el status prop
const colors = computed(() => {
  const { PRESENCE_COLORS } = usePresence()
  return PRESENCE_COLORS[props.presenceStatus]
})
</script>

<style scoped>
.msn-avatar-wrapper {
  position: relative;
  display: inline-block;
  width: var(--avatar-size, 128px);
  height: var(--avatar-size, 128px);
}

.msn-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.avatar-container {
  position: absolute;
  top: 14.3%;  /* Proporción del marco */
  left: 14.3%;
  width: 71.4%;  /* 100% - 2*14.3% */
  height: 71.4%;
  border-radius: 2px;
  overflow: hidden;
  background: var(--color-gray-200);
  z-index: 1;
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-gray-600);
  background: linear-gradient(135deg, var(--color-gray-100), var(--color-gray-300));
}

/* Variaciones de tamaño */
.msn-avatar-wrapper.size-sm {
  --avatar-size: 64px;
}

.msn-avatar-wrapper.size-md {
  --avatar-size: 96px;
}

.msn-avatar-wrapper.size-lg {
  --avatar-size: 128px;
}

.msn-avatar-wrapper.size-xl {
  --avatar-size: 160px;
}

/* Animación de hover */
.msn-avatar-wrapper {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.msn-avatar-wrapper:hover {
  transform: scale(1.05);
}

/* Modo oscuro */
.dark .avatar-container {
  background: var(--color-gray-800);
}

.dark .avatar-placeholder {
  background: linear-gradient(135deg, var(--color-gray-700), var(--color-gray-900));
  color: var(--color-gray-300);
}
</style>