Saved Search

Persisted query.

html

<div class="savedsearch" style="--accent:#E8A020;">
  <div class="savedsearch__head">
    <h3 class="savedsearch__name">New bugs this week</h3>
    
    <span class="savedsearch__bell" aria-label="Notifications on for new results" title="Notifications on">
      <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1a4 4 0 0 0-4 4v2.2c0 .5-.2 1-.5 1.4L2 10.5h12l-1.5-1.9c-.3-.4-.5-.9-.5-1.4V5a4 4 0 0 0-4-4Z" fill="currentColor"/><path d="M6.2 12.5a1.8 1.8 0 0 0 3.6 0" stroke="currentColor" stroke-width="1.2" fill="none"/></svg>
    </span>
    
    
  </div>
  <p class="savedsearch__query">"status:open created:&gt;-7d"</p>
  <p class="savedsearch__count" role="status">42 results found</p>
  <button type="button" class="savedsearch__run">Run search</button>
</div>
<style>
.savedsearch { font: 14px system-ui, sans-serif; color: #241430; max-width: 300px; border: 1.5px solid #24143020; border-radius: 10px; padding: 14px 16px; }
.savedsearch__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.savedsearch__name { margin: 0; font-size: 15px; font-weight: 600; }
.savedsearch__bell { color: var(--accent); display: inline-flex; }
.savedsearch__bell--off { color: #24143060; }
.savedsearch__query { margin: 0 0 8px; font-size: 13px; font-family: ui-monospace, monospace; background: #24143010; padding: 6px 8px; border-radius: 6px; }
.savedsearch__count { margin: 0 0 12px; font-size: 13px; color: #24143099; }
.savedsearch__run { border: none; background: var(--accent); color: #241430; padding: 8px 14px; border-radius: 6px; cursor: pointer; font: inherit; font-weight: 500; }
.savedsearch__run:hover, .savedsearch__run:focus-visible { opacity: .85; outline: none; }
</style>

tailwind

<div class="font-sans text-sm text-[#241430] max-w-[300px] border-[1.5px] border-[#24143020] rounded-[10px] px-4 py-3.5">
  <div class="flex items-center justify-between gap-2 mb-1.5">
    <h3 class="m-0 text-[15px] font-semibold">New bugs this week</h3>
    
    <span aria-label="Notifications on for new results" title="Notifications on" class="inline-flex savedsearch-bell-tw">
      <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1a4 4 0 0 0-4 4v2.2c0 .5-.2 1-.5 1.4L2 10.5h12l-1.5-1.9c-.3-.4-.5-.9-.5-1.4V5a4 4 0 0 0-4-4Z" fill="currentColor"/><path d="M6.2 12.5a1.8 1.8 0 0 0 3.6 0" stroke="currentColor" stroke-width="1.2" fill="none"/></svg>
    </span>
    
    
  </div>
  <p class="m-0 mb-2 text-[13px] font-mono bg-[#24143010] px-2 py-1.5 rounded-md">"status:open created:&gt;-7d"</p>
  <p role="status" class="m-0 mb-3 text-[13px] text-[#24143099]">42 results found</p>
  <button type="button" class="border-none text-[#241430] px-3.5 py-2 rounded-md cursor-pointer font-medium savedsearch-run-tw">Run search</button>
</div>
<style>
.savedsearch-bell-tw { color: #E8A020; }
.savedsearch-run-tw { background: #E8A020; }
.savedsearch-run-tw:hover, .savedsearch-run-tw:focus-visible { opacity: .85; outline: none; }
</style>

react

export function SavedSearch({
  name = "New bugs this week",
  query = "status:open created:>-7d",
  count = 42,
  notify = true,
  accent = "#E8A020",
}) {
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", maxWidth: 300, border: "1.5px solid #24143020", borderRadius: 10, padding: "14px 16px" }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8, marginBottom: 6 }}>
        <h3 style={{ margin: 0, fontSize: 15, fontWeight: 600 }}>{name}</h3>
        <span aria-label={notify ? "Notifications on for new results" : "Notifications off"} title={notify ? "Notifications on" : "Notifications off"} style={{ display: "inline-flex", color: notify ? accent : "#24143060" }}>
          <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
            <path d="M8 1a4 4 0 0 0-4 4v2.2c0 .5-.2 1-.5 1.4L2 10.5h12l-1.5-1.9c-.3-.4-.5-.9-.5-1.4V5a4 4 0 0 0-4-4Z" fill={notify ? "currentColor" : "none"} stroke="currentColor" strokeWidth="1.2" />
            {!notify && <path d="M1.5 1.5l13 13" stroke="currentColor" strokeWidth="1.2" />}
          </svg>
        </span>
      </div>
      <p style={{ margin: "0 0 8px", fontSize: 13, fontFamily: "ui-monospace, monospace", background: "#24143010", padding: "6px 8px", borderRadius: 6 }}>"{query}"</p>
      <p role="status" style={{ margin: "0 0 12px", fontSize: 13, color: "#24143099" }}>{count} results found</p>
      <button type="button" style={{ border: "none", background: accent, color: "#241430", padding: "8px 14px", borderRadius: 6, cursor: "pointer", fontWeight: 500 }}>Run search</button>
    </div>
  );
}