Alain Afflelou Design System

Magic Toggle 

<div class="flex flex-row justify-between align-middle gap-4 w-fit anchorMagic">
    <div class="flex flex-row justify-between items-center gap-1 p-1 rounded-full backdrop-blur-2xl dark" :class="{ 'dark': isMagicDark, 'light': !isMagicDark }">
        <div class="inline-flex items-center">
            <a id="paginationAnchor-magic" href="#magic" class="toggle-magic toggle-magic-classic  ">
                Magic
            </a>
        </div>
        <div class="inline-flex items-center">
            <a id="paginationAnchor-incognito" href="#incognito" class="toggle-magic toggle-magic-audio  ">
                Incognito
            </a>
        </div>
        <div class="inline-flex items-center">
            <a id="paginationAnchor-telemedecine" href="#telemedecine" class="toggle-magic toggle-magic-classic  ">
                Téléconsultation
            </a>
        </div>
    </div>
    <div class="rounded-full  backdrop-blur-2xl p-1 dark" :class="{ 'dark': isMagicDark, 'light': !isMagicDark }">
        <div class="inline-flex items-center">
            <a id="paginationAnchor-" href="#our-commitment" class="toggle-magic toggle-magic-classic  ">
                Passer
            </a>
        </div>
    </div>
</div>
 
<div class="flex flex-row justify-between align-middle gap-4 w-fit anchorMagic">
    <div class="flex flex-row justify-between items-center gap-1 p-1 rounded-full backdrop-blur-2xl dark"
         :class="{ 'dark': isMagicDark, 'light': !isMagicDark }"
    >
        {% for magic_toggle in left_magic_toggle %}
            {% include "@template-magic_toggle" with {
                label: magic_toggle.label,
                href: magic_toggle.href,
                color: color,
                state: magic_toggle.state,
                id: magic_toggle.id
            } %}
        {% endfor %}
    </div>
    <div class="rounded-full  backdrop-blur-2xl p-1 dark"
         :class="{ 'dark': isMagicDark, 'light': !isMagicDark }"
    >
        {% for magic_toggle in right_magic_toggle %}
            {% include "@template-magic_toggle" with {
                label: magic_toggle.label,
                href: magic_toggle.href,
                color: color,
                state: magic_toggle.state,
            } %}
        {% endfor %}
    </div>
</div>
 
{
  "isDark": "light",
  "left_magic_toggle": [
    {
      "label": "Magic",
      "href": "#magic",
      "color": "light",
      "state": "classic",
      "id": "magic"
    },
    {
      "label": "Incognito",
      "href": "#incognito",
      "state": "audio",
      "color": "light",
      "id": "incognito"
    },
    {
      "label": "Téléconsultation",
      "href": "#telemedecine",
      "state": "classic",
      "color": "light",
      "id": "telemedecine"
    }
  ],
  "right_magic_toggle": [
    {
      "label": "Passer",
      "href": "#our-commitment",
      "state": "classic",
      "color": "light"
    }
  ]
}

No notes defined.