Alain Afflelou Design System

Input 

<div class="w-[960px] h-8 flex items-center justify-between">
    <div class="flex items-center justify-between " @click="showProducts = true">
        <svg class=" shrink-0" width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M11 3.75C6.99594 3.75 3.75 6.99594 3.75 11C3.75 15.0041 6.99594 18.25 11 18.25C15.0041 18.25 18.25 15.0041 18.25 11C18.25 6.99594 15.0041 3.75 11 3.75ZM2.25 11C2.25 6.16751 6.16751 2.25 11 2.25C15.8325 2.25 19.75 6.16751 19.75 11C19.75 13.1462 18.9773 15.112 17.6949 16.6342L21.5303 20.4697C21.8232 20.7626 21.8232 21.2374 21.5303 21.5303C21.2374 21.8232 20.7626 21.8232 20.4697 21.5303L16.6342 17.6949C15.112 18.9773 13.1462 19.75 11 19.75C6.16751 19.75 2.25 15.8325 2.25 11Z" fill="currentColor" />
        </svg>
        <label>
            <input x-show="!showProducts" class="w-[824px] border-none bg-transparent focus:ring-0 placeholder:text-neutral-700" placeholder="Rechercher un modèle, une marque, une référence, …">
        </label>
        <label>
            <input x-show="showProducts" class="w-[824px] border-none bg-transparent focus:ring-0 placeholder:text-neutral-700" placeholder="Magic">
        </label>
    </div>
    <div class="flex flex-row items-center gap-4">
        <div class="cursor-pointer hover:scale-105" x-show="showProducts" x-transition class="transition-opacity duration-150" @click="showProducts = false">
            <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M8.15205 4.96349C8.65799 4.50438 9.3167 4.25004 9.9999 4.25H19.9999C20.7293 4.25 21.4288 4.53973 21.9445 5.05546C22.4602 5.57118 22.7499 6.27066 22.7499 7V17C22.7499 17.7293 22.4602 18.4288 21.9445 18.9445C21.4288 19.4603 20.7293 19.75 19.9999 19.75H9.99994C9.31668 19.75 8.65786 19.4956 8.1519 19.0364L1.824 13.2955C1.64326 13.1314 1.49873 12.9313 1.39989 12.7081C1.30106 12.485 1.25 12.2436 1.25 11.9995C1.25 11.7554 1.30106 11.514 1.39989 11.2909C1.49873 11.0677 1.64316 10.8677 1.8239 10.7036L8.15205 4.96349ZM9.99994 5.75C9.68938 5.75003 9.38996 5.86566 9.15999 6.07438L2.83199 11.8144C2.80624 11.8378 2.78551 11.8664 2.77141 11.8983C2.75729 11.9301 2.75 11.9646 2.75 11.9995C2.75 12.0344 2.75729 12.0689 2.77141 12.1007C2.78551 12.1326 2.80611 12.1611 2.83188 12.1845C2.83185 12.1845 2.83192 12.1846 2.83188 12.1845L9.15988 17.9255C9.38985 18.1342 9.68938 18.25 9.99994 18.25C9.99993 18.25 9.99996 18.25 9.99994 18.25H19.9999C20.3315 18.25 20.6494 18.1183 20.8838 17.8839C21.1182 17.6495 21.2499 17.3315 21.2499 17V7C21.2499 6.66848 21.1182 6.35054 20.8838 6.11612C20.6494 5.8817 20.3315 5.75 19.9999 5.75H9.99994C9.99996 5.75 9.99993 5.75 9.99994 5.75ZM11.4696 8.46967C11.7625 8.17678 12.2374 8.17678 12.5303 8.46967L14.9999 10.9393L17.4696 8.46967C17.7625 8.17678 18.2374 8.17678 18.5303 8.46967C18.8232 8.76256 18.8232 9.23744 18.5303 9.53033L16.0606 12L18.5303 14.4697C18.8232 14.7626 18.8232 15.2374 18.5303 15.5303C18.2374 15.8232 17.7625 15.8232 17.4696 15.5303L14.9999 13.0607L12.5303 15.5303C12.2374 15.8232 11.7625 15.8232 11.4696 15.5303C11.1767 15.2374 11.1767 14.7626 11.4696 14.4697L13.9393 12L11.4696 9.53033C11.1767 9.23744 11.1767 8.76256 11.4696 8.46967Z" fill="currentColor" />
            </svg>
        </div>
        <div class="cursor-pointer p-3 bg-neutral-150 hover:bg-dark-10 active:bg-dark-20 disabled:text-dark-40 disabled:bg-dark-5 rounded-full" @click="showProducts = false">
            <svg class=" shrink-0" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
            </svg>
        </div>
    </div>
</div>
 
<div class="w-[960px] h-8 flex items-center justify-between">
    <div class="flex items-center justify-between "
         @click="showProducts = true"
    >
        {% render "@icons-library--search-outline" with {width: '32', height: '32'} %}
        <label>
            <input x-show="!showProducts" class="w-[824px] border-none bg-transparent focus:ring-0 placeholder:text-neutral-700"
                   placeholder="{{ title }}"
            >
        </label>
        <label>
            <input x-show="showProducts" class="w-[824px] border-none bg-transparent focus:ring-0 placeholder:text-neutral-700"
                   placeholder="Magic"
            >
        </label>
    </div>
    <div class="flex flex-row items-center gap-4">
        <div class="cursor-pointer hover:scale-105"
             x-show="showProducts" x-transition class="transition-opacity duration-150"
             @click="showProducts = false"
        >
            {% render "@icons-library--delete-text" with {width: '24', height: '24'} %}
        </div>
        <div class="cursor-pointer p-3 bg-neutral-150 hover:bg-dark-10 active:bg-dark-20 disabled:text-dark-40 disabled:bg-dark-5 rounded-full"
             @click="showProducts = false"
        >
            {% render "@icons-library--close-outline" with {width: '16', height: '16'} %}
        </div>
    </div>
</div>
 
{
  "title": "Rechercher un modèle, une marque, une référence, …"
}

No notes defined.