src/lib/components/fields/Radio.svelte

<script lang="ts">
	import type { OptionRadio } from "$lib/type";
  import Icon from "@iconify/svelte";

  export let value: string;
  export let options: Array<OptionRadio> = [];
  export let onChange: (value: string) => void = () => {};

  const handleClick = (value: string) => {
    onChange(value);
  };
</script>

<div class="flex items-center justify-start">
  {#each options as option}
    <button
      class={`transition-all duration-200 rounded-full px-4 py-2.5 flex items-center justify-center gap-2 text-sm ${option.value === value ? "bg-neutral-800/60 text-white" : "text-neutral-400"}`}
      on:click={() => handleClick(option.value)}
    >
      {#if option.icon && option.iconColor}
        <Icon icon={option.icon} class="w-4 h-4 {option.value === value && option.iconColor}" />
      {/if}
      {option.label}
    </button>
  {/each}
</div>