I'm trying to convert an Alpine component in React (Select with Custom Avatar which is the first one) → https://tailwindui.com/components/application-ui/forms/select-menus
To copy Alpine source, you can open up Source tab & copy element from there or I'll paste it below (kept only 3 li elements which is repetitive code):
<div class="w-full max-w-xs mx-auto">
<!--
Custom select controls like this require a considerable amount of JS to implement from scratch. We're planning
to build some low-level libraries to make this easier with popular frameworks like React, Vue, and even Alpine.js
in the near future, but in the mean time we recommend these reference guides when building your implementation:
https://www.w3.org/TR/wai-aria-practices/#Listbox
https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html
-->
<div
x-data="Components.customSelect({ open: true, value: 3, selected: 3 })"
x-init="init()"
>
<label id="listbox-label" class="block text-sm font-medium text-gray-700">
Assigned to
</label>
<div class="mt-1 relative">
<button
type="button"
x-ref="button"
@keydown.arrow-up.stop.prevent="onButtonClick()"
@keydown.arrow-down.stop.prevent="onButtonClick()"
@click="onButtonClick()"
aria-haspopup="listbox"
:aria-expanded="open"
aria-expanded="true"
aria-labelledby="listbox-label"
class="relative w-full bg-white border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
>
<span class="flex items-center">
<img
:src='["https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80","https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80","https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80","https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80","https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80","https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80","https://images.unsplash.com/photo-1568409938619-12e139227838?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80","https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80","https://images.unsplash.com/photo-1584486520270-19eca1efcce5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80","https://images.unsplash.com/photo-1561505457-3bcad021f8ee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"][value]'
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
class="flex-shrink-0 h-6 w-6 rounded-full"
/>
<span
x-text='["Wade Cooper","Arlene Mccoy","Devon Webb"][value]'
class="ml-3 block truncate"
>Tom Cook</span
>
</span>
<span
class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"
>
<svg
class="h-5 w-5 text-gray-400"
x-description="Heroicon name: selector"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</span>
</button>
<div
x-show="open"
@click.away="open = false"
x-description="Select popover, show/hide based on select state."
x-transition:leave="transition ease-in duration-100"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
class="absolute mt-1 w-full rounded-md bg-white shadow-lg"
>
<ul
@keydown.enter.stop.prevent="onOptionSelect()"
@keydown.space.stop.prevent="onOptionSelect()"
@keydown.escape="onEscape()"
@keydown.arrow-up.prevent="onArrowUp()"
@keydown.arrow-down.prevent="onArrowDown()"
x-ref="listbox"
tabindex="-1"
role="listbox"
aria-labelledby="listbox-label"
:aria-activedescendant="activeDescendant"
class="max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
x-max="1"
aria-activedescendant=""
>
<li
x-description="Select option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation."
x-state:on="Highlighted"
x-state:off="Not Highlighted"
id="listbox-item-0"
role="option"
@click="choose(0)"
@mouseenter="selected = 0"
@mouseleave="selected = null"
:class="{ 'text-white bg-indigo-600': selected === 0, 'text-gray-900': !(selected === 0) }"
class="cursor-default select-none relative py-2 pl-3 pr-9 text-gray-900"
>
<div class="flex items-center">
<img
src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
class="flex-shrink-0 h-6 w-6 rounded-full"
/>
<span
x-state:on="Selected"
x-state:off="Not Selected"
:class="{ 'font-semibold': value === 0, 'font-normal': !(value === 0) }"
class="ml-3 block font-normal truncate"
>
Wade Cooper
</span>
</div>
<span
x-description="Checkmark, only display for selected option."
x-state:on="Highlighted"
x-state:off="Not Highlighted"
x-show="value === 0"
:class="{ 'text-white': selected === 0, 'text-indigo-600': !(selected === 0) }"
class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600"
style="display: none"
>
<svg
class="h-5 w-5"
x-description="Heroicon name: check"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
</span>
</li>
<li
x-description="Select option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation."
x-state:on="Highlighted"
x-state:off="Not Highlighted"
id="listbox-item-1"
role="option"
@click="choose(1)"
@mouseenter="selected = 1"
@mouseleave="selected = null"
:class="{ 'text-white bg-indigo-600': selected === 1, 'text-gray-900': !(selected === 1) }"
class="text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9"
>
<div class="flex items-center">
<img
src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
class="flex-shrink-0 h-6 w-6 rounded-full"
/>
<span
x-state:on="Selected"
x-state:off="Not Selected"
:class="{ 'font-semibold': value === 1, 'font-normal': !(value === 1) }"
class="ml-3 block font-normal truncate"
>
Arlene Mccoy
</span>
</div>
<span
x-description="Checkmark, only display for selected option."
x-state:on="Highlighted"
x-state:off="Not Highlighted"
x-show="value === 1"
:class="{ 'text-white': selected === 1, 'text-indigo-600': !(selected === 1) }"
class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600"
style=&
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
