reestructurar IconoDeEstado

src/components/BarraDeEstado.vue

 <template>
   <div class="barra">
-    <icono-de-estado
-      :cantidad="getCantidad('compromiso')"
-      tipo="compromiso"
-      label="Compromiso"
-    />
-    <icono-de-estado
-      :cantidad="getCantidad('a_favor')"
-      tipo="a_favor"
-      label="A favor"
-    />
-    <icono-de-estado
-      :cantidad="getCantidad('en_contra')"
-      tipo="en_contra"
-      label="En contra"
-    />
-    <icono-de-estado
-      :cantidad="getCantidad('bloqueo')"
-      tipo="bloqueo"
-      label="Bloqueo"
-    />
+    <icono-de-estado :cantidad="getCantidad('compromiso')" tipo="compromiso" />
+    <icono-de-estado :cantidad="getCantidad('a_favor')" tipo="a_favor" />
+    <icono-de-estado :cantidad="getCantidad('en_contra')" tipo="en_contra" />
+    <icono-de-estado :cantidad="getCantidad('bloqueo')" tipo="bloqueo" />
     <icono-de-estado
       :cantidad="getCantidad('indiferente')"
       tipo="indiferente"
-      label="Indiferente"
     />
   </div>
 </template>

src/components/IconoDeEstado.vue

@@ -23,7 +23,7 @@ import IconoMeComprometo from '@/assets/iconos/me-comprometo.svg?inline'
 
 export default {
   name: 'IconoDeEstado',
-  props: ['tipo', 'cantidad', 'label'],
+  props: ['tipo', 'cantidad'],
   components: {
     IconoAFavor,
     IconoBloqueo,
@@ -46,17 +46,30 @@ export default {
           return 'white'
       }
     },
+    label() {
+      switch (this.tipo) {
+        case 'compromiso':
+          return 'Compromiso'
+        case 'a_favor':
+          return 'A favor'
+        case 'en_contra':
+          return 'En contra'
+        case 'indiferente':
+          return 'Indiferente'
+        case 'compromiso':
+          return 'Compromiso'
+        default:
+          return '' // !!!
+      }
+    },
   },
 }
 </script>
 
 <style lang="sass" scoped>
 .icono-de-estado
-  display: flex
-  flex-direction: column
-  align-items: center
-  justify-content: space-between
-  margin: 0 0.3em
+  display: block
+  margin: 0 auto
   .cantidad
     align-self: flex-start
     color: var(--blackish)

src/components/Posicion.vue

 <template>
   <div class="posicion">
-    <icono-de-estado :tipo="posicion.estado" :nivel="0" />
+    <icono-de-estado :tipo="posicion.estado" />
     <div class="body">
       <div class="head">
         <h4>{{ posicion.pirata.nick }}</h4>
@@ -22,7 +22,7 @@
       </a>
       <div class="posiciones-anteriores" v-if="mostrarAnteriores">
         <div class="posicion-anterior" v-for="posicion in posicionesAnteriores">
-          <icono-de-estado :tipo="posicion.estado" :nivel="0" />
+          <icono-de-estado :tipo="posicion.estado" />
           <p>
             {{ posicion.comentario }}
             <span class="fecha">{{ fechaRelativa(posicion.created_at) }}</span>