<script setup>
import { computed } from 'vue';

const $props = defineProps({
    colors: {
        type: String,
        default: '{"value": []}',
    },
});

const colorArray = computed(() => JSON.parse($props.colors)?.value);
const maxHeight = 30;
const colorHeight = maxHeight / colorArray.value?.length;
</script>
<template>
    <div v-if="colors" class="color-div" :style="{ height: `${maxHeight}px` }">
        <div
            v-for="(color, index) in colorArray"
            :key="index"
            :style="{
                backgroundColor: `#${color}`,
                height: `${colorHeight}px`,
            }"
        >
            &nbsp;
        </div>
    </div>
</template>
<style scoped>
.color-div {
    display: flex;
    flex-direction: column;
}
</style>
