Alain Afflelou Design System

Categories 

<div class="inline-flex flex-col gap-4 text-neutral-500">
    <h2 class="font-semibold">Catégories correspondants à votre recherche</h2>
    <div x-data="searchHighlighter()" x-init="highlightSearchedTerm()" class="inline-flex flex-col gap-2">
        <div class="inline-flex gap-2 items-center text-neutral-500 ">
            <span class="text-base text-neutral-400 link-content">
                <a href="#" class=" text-base">
                    Optique / Magic / Montures Magic
                </a>
            </span>
        </div>
        <div class="inline-flex gap-2 items-center text-neutral-500 ">
            <span class="text-base text-neutral-400 link-content">
                <a href="#" class=" text-base">
                    Optique / Magic / Magic clips
                </a>
            </span>
        </div>
    </div>

</div>

<!-- These script is here to highlight the search term in categories results. You need to change 'Magic' with the dynamic search term. -->
<script>
    function searchHighlighter() {
        return {
            highlightSearchedTerm() {
                const links = document.querySelectorAll('.link-content');
                links.forEach(link => {
                    link.innerHTML = link.innerHTML.replace(/(Magic)/g, '<span class="font-semibold">$1</span>');
                });
            }
        };
    }
</script>
 
{% set hasIcon = false %}
{% for link in links if not hasIcon and link.icon is defined %}
    {% set hasIcon = true %}
{% endfor %}

{% set links_content %}
    <div x-data="searchHighlighter()" x-init="highlightSearchedTerm()" class="inline-flex flex-col gap-2">
        {% for link in links %}
            <div class="inline-flex gap-2 items-center text-neutral-500 {{ not link.icon and hasIcon ? 'ml-8' }}">
                {% if link.icon %}
                    {% render "@icons-" ~ link.icon.name|default("library--arrow-right") with link.icon %}
                {% endif %}
                <span class="text-base text-neutral-400 link-content">
                    {% render "@template-link" with link|merge({color:color}) %}
                </span>
            </div>
        {% endfor %}
    </div>
{% endset %}

<div class="inline-flex flex-col gap-4 text-neutral-500">
    <h2 class="font-semibold">{{ title }}</h2>
    {{ links_content }}
</div>

<!-- These script is here to highlight the search term in categories results. You need to change 'Magic' with the dynamic search term. -->
<script>
    function searchHighlighter() {
        return {
            highlightSearchedTerm() {
                const links = document.querySelectorAll('.link-content');

                links.forEach(link => {
                    link.innerHTML = link.innerHTML.replace(/(Magic)/g, '<span class="font-semibold">$1</span>');
                });
            }
        };
    }
</script>
 
{
  "title": "Catégories correspondants à votre recherche",
  "links": [
    {
      "label": "Optique / Magic / Montures Magic"
    },
    {
      "label": "Optique / Magic / Magic clips"
    }
  ]
}

No notes defined.