You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

NudifyPhotoBadge.vue 602B

123456789101112131415161718192021222324252627282930313233343536
  1. <template>
  2. <div v-tooltip="photo.avatar.name" class="badge" :style="{ backgroundColor: color }">
  3. {{ letter }}
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. props: {
  9. photo: {
  10. type: Object,
  11. required: true,
  12. },
  13. },
  14. computed: {
  15. color() {
  16. return this.photo.avatar.color
  17. },
  18. letter() {
  19. return this.photo.avatar.name[0]
  20. },
  21. },
  22. }
  23. </script>
  24. <style lang="scss" scoped>
  25. .badge {
  26. @apply flex justify-center items-center;
  27. @apply rounded-full text-lg font-bold text-white;
  28. -webkit-text-stroke: 1px black;
  29. width: 30px;
  30. height: 30px;
  31. }
  32. </style>