Search Results

Results matching a query.

html

<section class="sres" style="--accent:#E8A020;">
  <p class="sres__status" role="status">3 results for "roadmap"</p>
  <ul class="sres__list">
    <li class="sres__item" style="border-radius:10px;">
      <p class="sres__title">Q3 roadmap overview</p>
      <p class="sres__meta">Docs · updated 2 days ago</p>
    </li>
    <li class="sres__item" style="border-radius:10px;">
      <p class="sres__title">roadmap planning notes</p>
      <p class="sres__meta">Wiki · updated 5 days ago</p>
    </li>
    <li class="sres__item" style="border-radius:10px;">
      <p class="sres__title">Archive: roadmap v1</p>
      <p class="sres__meta">Docs · updated 3 weeks ago</p>
    </li>
  </ul>
  
</section>
<style>
.sres { display: block; font: 14px system-ui, sans-serif; color: #241430; max-width: 380px; }
.sres__status { margin: 0 0 10px; font-size: 12.5px; color: #24143090; }
.sres__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sres__item { padding: 10px 12px; background: #FAF7F2; border: 1px solid #24143018; border-left: 3px solid var(--accent); }
.sres__item:hover { background: #24143008; }
.sres__title { margin: 0 0 2px; font-weight: 600; }
.sres__meta { margin: 0; font-size: 12px; color: #24143080; }
.sres__empty { padding: 20px 16px; text-align: center; background: #24143008; border: 1px dashed #24143030; }
.sres__empty-title { margin: 0 0 4px; font-weight: 600; }
.sres__empty-body { margin: 0; font-size: 12.5px; color: #24143080; }
</style>

tailwind

<section class="block font-sans text-sm text-[#241430] max-w-[380px]">
  <p role="status" class="mb-2.5 text-[12.5px] text-[#24143090]">3 results for "roadmap"</p>
  <ul class="list-none m-0 p-0 grid gap-2">
    <li class="px-3 py-2.5 bg-[#FAF7F2] border border-[#24143018] hover:bg-[#24143008]" style="border-radius:10px;border-left:3px solid #E8A020;">
      <p class="m-0 mb-0.5 font-semibold">Q3 roadmap overview</p>
      <p class="m-0 text-xs text-[#24143080]">Docs · updated 2 days ago</p>
    </li>
    <li class="px-3 py-2.5 bg-[#FAF7F2] border border-[#24143018] hover:bg-[#24143008]" style="border-radius:10px;border-left:3px solid #E8A020;">
      <p class="m-0 mb-0.5 font-semibold">roadmap planning notes</p>
      <p class="m-0 text-xs text-[#24143080]">Wiki · updated 5 days ago</p>
    </li>
    <li class="px-3 py-2.5 bg-[#FAF7F2] border border-[#24143018] hover:bg-[#24143008]" style="border-radius:10px;border-left:3px solid #E8A020;">
      <p class="m-0 mb-0.5 font-semibold">Archive: roadmap v1</p>
      <p class="m-0 text-xs text-[#24143080]">Docs · updated 3 weeks ago</p>
    </li>
  </ul>
  
</section>

react

export function SearchResults({
  query = "roadmap",
  count = 3,
  accent = "#E8A020",
  radius = 10,
}) {
  const items = [
    { title: `Q3 ${query} overview`, meta: "Docs · updated 2 days ago" },
    { title: `${query} planning notes`, meta: "Wiki · updated 5 days ago" },
    { title: `Archive: ${query} v1`, meta: "Docs · updated 3 weeks ago" },
  ];
  return (
    <section style={{ display: "block", fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", maxWidth: 380 }}>
      <p role="status" style={{ margin: "0 0 10px", fontSize: 12.5, color: "#24143090" }}>{count} results for "{query}"</p>
      {count > 0 ? (
        <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "grid", gap: 8 }}>
          {items.map((item) => (
            <li key={item.title} style={{ padding: "10px 12px", background: "#FAF7F2", border: "1px solid #24143018", borderLeft: `3px solid ${accent}`, borderRadius: radius }}>
              <p style={{ margin: "0 0 2px", fontWeight: 600 }}>{item.title}</p>
              <p style={{ margin: 0, fontSize: 12, color: "#24143080" }}>{item.meta}</p>
            </li>
          ))}
        </ul>
      ) : (
        <div style={{ padding: "20px 16px", textAlign: "center", background: "#24143008", border: "1px dashed #24143030", borderRadius: radius }}>
          <p style={{ margin: "0 0 4px", fontWeight: 600 }}>No results for "{query}"</p>
          <p style={{ margin: 0, fontSize: 12.5, color: "#24143080" }}>Try a different spelling or a broader term.</p>
        </div>
      )}
    </section>
  );
}