<script lang="ts" setup>

// types

type Props = {
    color: string;
    selected ?: boolean;
}

// props

defineProps<Props>();

</script>

<template>
    <div
        class="size-[30px] ring ring-offset-1 rounded-full shadow-black/30 shadow-inner"
        :class="selected ? 'ring-black' : 'ring-transparent'"
        :style="{
            backgroundColor: color,
        }"
    />
</template>