<template>
  <span class="color-tile" :style="{ '--current-color': `var(${color})` }">
    {{ color }}
  </span>
</template>

<script setup lang="ts">
defineProps<{ color: string }>();
</script>

<style scoped>
.color-tile {
  background-color: var(--current-color);
  width: 100px;
  height: 100px;
  color: black;
  display: flex;
  margin: 4px;
  font-size: 12px;
  align-items: center;
  justify-content: center;
}
</style>
