Entity Avatar

      <script setup>
const gradientTests = [
  { id: 'D', gradient: 'red → pink (600, 400)', index: 0 }, // 68 % 17 = 0
  { id: 'E', gradient: 'rose → orange (500, 400)', index: 1 }, // 69 % 17 = 1
  { id: 'F', gradient: 'orange → yellow (600, 400)', index: 2 }, // 70 % 17 = 2
  { id: 'G', gradient: 'amber → lime (600, 400)', index: 3 }, // 71 % 17 = 3
  { id: 'H', gradient: 'lime → green (600, 400)', index: 4 }, // 72 % 17 = 4
  { id: 'I', gradient: 'green → teal (600, 400)', index: 5 }, // 73 % 17 = 5
  { id: 'J', gradient: 'emerald → cyan (600, 300)', index: 6 }, // 74 % 17 = 6
  { id: 'K', gradient: 'teal → blue (600, 400)', index: 7 }, // 75 % 17 = 7
  { id: 'L', gradient: 'cyan → sky (600, 400)', index: 8 }, // 76 % 17 = 8
  { id: 'M', gradient: 'sky → indigo (500, 600)', index: 9 }, // 77 % 17 = 9
  { id: 'N', gradient: 'blue → cyan (700, 300)', index: 10 }, // 78 % 17 = 10
  { id: 'O', gradient: 'indigo → purple (600, 400)', index: 11 }, // 79 % 17 = 11
  { id: 'P', gradient: 'violet → fuchsia (600, 400)', index: 12 }, // 80 % 17 = 12
  { id: 'Q', gradient: 'purple → pink (600, 400)', index: 13 }, // 81 % 17 = 13
  { id: 'R', gradient: 'fuschia → pink (600, 400)', index: 14 }, // 82 % 17 = 14
  { id: 'S', gradient: 'pink → rose (600, 400)', index: 15 }, // 83 % 17 = 15
  { id: 'T', gradient: 'rose → red (600, 400)', index: 16 }, // 84 % 17 = 16
]
</script>

<template>
  <div class="grid grid-cols-1 gap-6 lg:grid-cols-3 sm:grid-cols-2 xl:grid-cols-4">
    <div
      v-for="test in gradientTests"
      :key="test.id"
      class="flex flex-col items-center border border-canvas-200 rounded-lg p-4 space-y-3 dark:border-canvas-700"
    >
      <CEntityAvatar
        :id="test.id"
        type="billing-account"
      />
      <div class="text-center">
        <div class="mt-1 text-xs text-canvas-600 dark:text-canvas-400">
          {{ test.gradient }}
        </div>
      </div>
    </div>
  </div>
</template>

    

      <template>
  <CEntityAvatar type="virtual-machine" id="example123" />
</template>

    

      <template>
  <CEntityAvatar id="entity89" type="billing-account" />
</template>

    

      <template>
  <CEntityAvatar loading id="example123" type="billing-account" />
</template>