Recent Searches

Previously used searches.

html

<nav class="rsearch rsearch--3" aria-label="Recent searches" style="--accent:#BFD9F2;">
  <div class="rsearch__head">
    <span class="rsearch__title">Recent searches</span>
    <button type="button" class="rsearch__clear">Clear recent searches</button>
  </div>
  <ul class="rsearch__list">
    <li class="rsearch__row-1"><button type="button" class="rsearch__item">quarterly roadmap</button></li>
    <li class="rsearch__row-2"><button type="button" class="rsearch__item">design tokens</button></li>
    <li class="rsearch__row-3"><button type="button" class="rsearch__item">onboarding flow</button></li>
    <li class="rsearch__row-4"><button type="button" class="rsearch__item">release notes</button></li>
  </ul>
</nav>
<style>
.rsearch { display: block; font: 14px system-ui, sans-serif; color: #241430; max-width: 260px; }
.rsearch__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.rsearch__title { font-weight: 600; }
.rsearch__clear { border: none; background: none; padding: 0; font: inherit; font-size: 12px; color: #24143090; text-decoration: underline; cursor: pointer; }
.rsearch__clear:hover { color: #241430; }
.rsearch__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rsearch--1 .rsearch__row-2, .rsearch--1 .rsearch__row-3, .rsearch--1 .rsearch__row-4 { display: none; }
.rsearch--2 .rsearch__row-3, .rsearch--2 .rsearch__row-4 { display: none; }
.rsearch--3 .rsearch__row-4 { display: none; }
.rsearch__item { width: 100%; text-align: left; border: none; background: transparent; padding: 6px 8px; border-radius: 6px; font: inherit; color: #241430; cursor: pointer; }
.rsearch__item:hover { background: color-mix(in srgb, var(--accent) 25%, transparent); }
</style>

tailwind

<nav aria-label="Recent searches" class="rsearch-tw rsearch-tw--3 block font-sans text-sm text-[#241430] max-w-[260px]" style="--accent:#BFD9F2;">
  <div class="flex items-baseline justify-between gap-2 mb-2">
    <span class="font-semibold">Recent searches</span>
    <button type="button" class="border-none bg-transparent p-0 text-xs underline text-[#24143090] hover:text-[#241430]">Clear recent searches</button>
  </div>
  <ul class="list-none m-0 p-0 grid gap-0.5">
    <li class="rsearch-tw-row-1"><button type="button" class="w-full text-left border-none bg-transparent px-2 py-1.5 rounded-md hover:bg-[color-mix(in_srgb,var(--accent)_25%,transparent)]">quarterly roadmap</button></li>
    <li class="rsearch-tw-row-2"><button type="button" class="w-full text-left border-none bg-transparent px-2 py-1.5 rounded-md hover:bg-[color-mix(in_srgb,var(--accent)_25%,transparent)]">design tokens</button></li>
    <li class="rsearch-tw-row-3"><button type="button" class="w-full text-left border-none bg-transparent px-2 py-1.5 rounded-md hover:bg-[color-mix(in_srgb,var(--accent)_25%,transparent)]">onboarding flow</button></li>
    <li class="rsearch-tw-row-4"><button type="button" class="w-full text-left border-none bg-transparent px-2 py-1.5 rounded-md hover:bg-[color-mix(in_srgb,var(--accent)_25%,transparent)]">release notes</button></li>
  </ul>
</nav>
<style>
.rsearch-tw--1 .rsearch-tw-row-2, .rsearch-tw--1 .rsearch-tw-row-3, .rsearch-tw--1 .rsearch-tw-row-4 { display: none; }
.rsearch-tw--2 .rsearch-tw-row-3, .rsearch-tw--2 .rsearch-tw-row-4 { display: none; }
.rsearch-tw--3 .rsearch-tw-row-4 { display: none; }
</style>

react

export function RecentSearches({
  label = "Recent searches",
  count = 3,
  showClear = true,
  accent = "#BFD9F2",
}) {
  const queries = ["quarterly roadmap", "design tokens", "onboarding flow", "release notes"];
  const shown = queries.slice(0, Math.min(Math.max(count, 1), queries.length));
  return (
    <nav aria-label={label} style={{ display: "block", fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", maxWidth: 260 }}>
      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 8, marginBottom: 8 }}>
        <span style={{ fontWeight: 600 }}>{label}</span>
        {showClear && (
          <button type="button" style={{ border: "none", background: "none", padding: 0, font: "inherit", fontSize: 12, color: "#24143090", textDecoration: "underline", cursor: "pointer" }}>Clear recent searches</button>
        )}
      </div>
      <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "grid", gap: 2 }}>
        {shown.map((q) => (
          <li key={q}>
            <button type="button" style={{ width: "100%", textAlign: "left", border: "none", background: "transparent", padding: "6px 8px", borderRadius: 6, font: "inherit", color: "#241430", cursor: "pointer" }}
              onMouseOver={(e) => { e.currentTarget.style.background = `${accent}40`; }}
              onMouseOut={(e) => { e.currentTarget.style.background = "transparent"; }}>{q}</button>
          </li>
        ))}
      </ul>
    </nav>
  );
}