Untitled

<div x-data="{
    open: false,
    items:[
     { label: 'Repost', options: [{ value: 1, label: 'Yes' }, { value: 2, label: 'No' }], name: 'repost' },
      { label: 'Crosspost', options: [{ value: 1, label: 'Yes' }, { value: 2, label: 'No' }], name: 'crosspost' }
    ],
    selected:{}
  }"
     class="w-full relative"
>
    <!-- Button to toggle the dropdown -->
    <button @click="open = !open"
            class="relative w-full bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-500 rounded-md pl-3 shadow-sm pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-primary-500 focus:border-primary-500 sm:text-sm text-gray-900 dark:text-gray-300">
        <span class="truncate flex items-center space-x-1.5">
            <span class="flex gap-2">
              Toggle Options
            </span>
        </span>
        <span
            class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
            <x:icons.chevron-down class="h-5 w-5 text-gray-500"/>
        </span>
    </button>

    <!-- Dropdown -->
    <div x-show="open"
         x-transition:leave="transition ease-in duration-100"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         @click.away="open = false"
         class="absolute z-50 mt-1 w-96  left-0  bg-white dark:bg-gray-800 shadow-lg rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm border dark:border dark:border-gray-500"
         style="display: none;">
        <ul>
            <template x-for="item in items" :key="item.label">
                <li class="flex items-center justify-between p-2">
                    <span class="font-semibold" x-text="item.label"></span>
                    <div class="flex space-x-2">
                        <template x-for="option in item.options" :key="option.value">
                            <button
                                :class="{'bg-indigo-400 text-white': selected[item.name] === option.value, 'bg-gray-200': selected[item.name] !== option.value}"
                                class="px-4 py-1 rounded-md text-xs focus:outline-none"
                                @click="selected[item.name] = option.value"
                                x-text="option.label">
                            </button>
                        </template>
                    </div>
                </li>
            </template>
        </ul>
    </div>
</div>