SearchApi Design System
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<nav aria-label="Sections">
  <ul class="flex flex-wrap items-center gap-x-5 border-b border-line">
    <li>
      <a href="#overview"
           class="-mb-px inline-block border-b-2 border-accent-line px-0.5 py-2 text-sm font-medium text-accent-line"
           aria-current="page">Overview</a>
    </li>
    <li>
      <a href="#parameters"
           class="-mb-px inline-block border-b-2 border-transparent px-0.5 py-2 text-sm font-medium text-ink-muted transition-colors hover:border-line-strong hover:text-ink"
           >Parameters</a>
    </li>
    <li>
      <a href="#response"
           class="-mb-px inline-block border-b-2 border-transparent px-0.5 py-2 text-sm font-medium text-ink-muted transition-colors hover:border-line-strong hover:text-ink"
           >Response</a>
    </li>
  </ul>
</nav>
1
2
items = ITEMS.map { |item| item.merge(active: item[:label] == active) }
render TabsComponent.new(items: items, label: "Sections", variant: variant)

One control for three jobs — the result tabs, the code-language switcher and search_type — which is the argument for building it once.

Param Description Input

—

—