Alain Afflelou Design System

Store Switcher 

<div class="flex rounded-full bg-dark-5 p-1 gap-1 " x-data="{
        get isAudio() { return $store.locator.isAudio },
        toggleType(isAudio) { $store.locator.toggleStoreType(isAudio) }
     }">
    <button type="button" @click="toggleType(false)" :class="!isAudio ? 'bg-white text-neutral-800' : 'bg-transparent text-neutral-500'" class="w-full  btn btn-light ">
        Opticien

    </button>
    <button type="button" @click="toggleType(true)" :class="isAudio ? 'bg-white text-audio-700' : 'bg-transparent text-neutral-500'" class="w-full hover:text-white  btn btn-light ">
        Acousticien

    </button>
</div>
 
<div
        class="flex rounded-full bg-dark-5 p-1 gap-1 {{ className }}"
        x-data="{
        get isAudio() { return $store.locator.isAudio },
        toggleType(isAudio) { $store.locator.toggleStoreType(isAudio) }
     }"
>
    {% render "@template-button" with {
        label: 'Opticien',
        color: "light",
        button_class: "w-full",
        button_attribute: ('@click="toggleType(false)" :class="!isAudio ? \'bg-white text-neutral-800\' : \'bg-transparent text-neutral-500\'"')|replace({"\'": "'"}),
    } %}
    {% render "@template-button" with {
        label: 'Acousticien',
        color: "light",
        button_class: "w-full hover:text-white",
        button_attribute: ('@click="toggleType(true)" :class="isAudio ? \'bg-white text-audio-700\' : \'bg-transparent text-neutral-500\'"')|replace({"\'": "'"}),
    } %}
</div>
 
/* No context defined. */

No notes defined.