Anchor ViewComponents

Pages

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<div class="contents" data-controller="popover">
  <button name="button" type="button" class="flex items-center rounded-sm text-sm border py-1 pl-3 pr-2 bg-white" data-popover-target="button" data-testid="filter-description-language" popovertarget="language-popover">
    <span class="font-semibold uppercase mr-2">Language:</span>
    <span>Spanish</span>
    <!-- Source: Iconoir, added via `bin/add_icon` -->
    <svg width="24" height="24" stroke-width="1.5" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0 inline w-4 h-4 text-secondary ml-1" aria-hidden="true">
      <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg>
  </button>
  <div popover="auto" class="absolute -left-full -top-full m-0 bg-white rounded-sm border border-subdued popover-open:block min-w-[200px] max-w-[400px] max-h-[352px] p-0" data-action="toggle->popover#positionPopover" data-popover-target="popover" data-testid="language-popover" id="language-popover">
    <form id="language-form" class="flex flex-col gap-4 p-4 pb-1" accept-charset="UTF-8" method="get">
      <input value="%7B%7D" autocomplete="off" type="hidden" name="_display" id="_display" />
      <label class="sr-only" data-testid="label-language" for="language">Language</label>
      <div class="flex flex-col space-y-2 text-base" data-testid="radio-field-language">
        <div class="flex gap-1 items-start">
          <input aria="false" data-testid="radio-language-en" include_hidden="false" class="appearance-none size-4.5 m-[3px] shrink-0 rounded-full border-2 hover:border-gray-600 checked:bg-radial checked:from-blue-600 checked:from-50% checked:to-transparent checked:to-54% checked:border-accent checked:hover:from-blue-800 checked:hover:from-50% checked:hover:to-transparent checked:hover:to-54% checked:hover:border-accent-hover disabled:border-subdued disabled:checked:border-subdued disabled:checked:from-subdued disabled:checked:from-50% disabled:checked:to-transparent disabled:checked:to-54% disabled:checked:border-subdued" type="radio" value="en" name="language" id="language_en" />
          <div class="self-center"><label for="language_en">English</label></div>
        </div>
        <div class="flex gap-1 items-start">
          <input aria="false" data-testid="radio-language-es" include_hidden="false" class="appearance-none size-4.5 m-[3px] shrink-0 rounded-full border-2 hover:border-gray-600 checked:bg-radial checked:from-blue-600 checked:from-50% checked:to-transparent checked:to-54% checked:border-accent checked:hover:from-blue-800 checked:hover:from-50% checked:hover:to-transparent checked:hover:to-54% checked:hover:border-accent-hover disabled:border-subdued disabled:checked:border-subdued disabled:checked:from-subdued disabled:checked:from-50% disabled:checked:to-transparent disabled:checked:to-54% disabled:checked:border-subdued" type="radio" value="es" checked="checked" name="language" id="language_es" />
          <div class="self-center"><label for="language_es">Spanish</label></div>
        </div>
        <div class="flex gap-1 items-start">
          <input aria="false" data-testid="radio-language-fr" include_hidden="false" class="appearance-none size-4.5 m-[3px] shrink-0 rounded-full border-2 hover:border-gray-600 checked:bg-radial checked:from-blue-600 checked:from-50% checked:to-transparent checked:to-54% checked:border-accent checked:hover:from-blue-800 checked:hover:from-50% checked:hover:to-transparent checked:hover:to-54% checked:hover:border-accent-hover disabled:border-subdued disabled:checked:border-subdued disabled:checked:from-subdued disabled:checked:from-50% disabled:checked:to-transparent disabled:checked:to-54% disabled:checked:border-subdued" type="radio" value="fr" name="language" id="language_fr" />
          <div class="self-center"><label for="language_fr">French</label></div>
        </div>
      </div>
    </form>
  
    <div class="flex p-4 pt-3 sticky bottom-0 bg-white">
      <button type="submit" class="btn-small btn btn-primary" data-testid="apply-button" form="language-form">
        Apply
      </button>
      <a href="?_display=%257B%257D" class="btn-small btn btn-text" data-testid="clear-button">
        Clear
      </a>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
anchor_filter(
  param_key: :language,
  type: :radio,
  label: "Language",
  options: [["English", "en"], ["Spanish", "es"], ["French", "fr"]],
  selected: "es"
)

No notes provided.

No params configured.