<div class={'flex min-w-max items-center justify-center gap-4 rounded-full'}>
	<div
		class="bg-base-100 dark:bg-base-900 text-base-900 dark:text-base-50 border-base-200 dark:border-base-800 divide-base-200 dark:divide-base-800 flex w-28 flex-col gap-x-1 divide-y overflow-hidden rounded-2xl border text-sm"
	>
		<div
			class={[
				'bg-accent-500/5 inline-flex cursor-pointer items-center p-1 px-3 transition-all',
				'text-accent-700 dark:text-accent-300'
			]}
		>
			<svg
				xmlns="http://www.w3.org/2000/svg"
				fill="none"
				viewBox="0 0 24 24"
				stroke-width="2"
				stroke="currentColor"
				class="mr-1.5 size-3.5"
			>
				<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
			</svg>

			Apple
		</div>

		<div class={['inline-flex cursor-pointer items-center p-1 px-3 transition-all']}>
			<div class="mr-1.5 size-3.5"></div>
			Orange
		</div>

		<div class={['inline-flex cursor-pointer items-center  p-1 px-3 transition-all']}>
			<div class="mr-1.5 size-3.5"></div>
			Banana
		</div>
	</div>
</div>
