<script lang="ts">
  interface Props {
    name: string;
    color: string;
  }

  const { name, color }: Props = $props();
</script>

<div class="flex items-center gap-x-2">
  <div class="rounded-sm w-3 h-3" style="background-color: {color}"></div>
  <h3 class="text-xs sm:text-xl">{name}</h3>
</div>
