Topbar

Horizontal application toolbar.

html

<div class="tb-demo tb-demo--comfortable" style="background:#241430;">
  <span class="tb-demo__title">Planner</span>
  <input class="tb-demo__search" type="text" placeholder="Search..." />
  <div class="tb-demo__actions">
    <button class="tb-demo__icon" type="button">＋</button>
    <button class="tb-demo__icon" type="button">⚙</button>
  </div>
</div>
<style>
.tb-demo { display: flex; align-items: center; gap: 12px; font: 13px system-ui, sans-serif; color: #FAF7F2; padding: 12px 16px; box-sizing: border-box; }
.tb-demo--compact { padding: 6px 12px; gap: 8px; font-size: 12px; }
.tb-demo__title { font-weight: 700; }
.tb-demo__search { flex: 1; max-width: 220px; box-sizing: border-box; border: 1px solid #FAF7F244; background: #FAF7F21a; color: #FAF7F2; border-radius: 6px; padding: 6px 10px; font: inherit; }
.tb-demo__search::placeholder { color: #FAF7F299; }
.tb-demo__search:focus-visible { outline: 2px solid #FAF7F2; }
.tb-demo__actions { display: flex; gap: 8px; margin-left: auto; }
.tb-demo__icon { background: transparent; border: none; color: #FAF7F2; cursor: pointer; font-size: 14px; padding: 4px 8px; border-radius: 6px; }
.tb-demo__icon:hover { background: #FAF7F21a; }
</style>

tailwind

<div class="flex items-center gap-3 font-sans text-[13px] text-[#FAF7F2] px-4 py-3 box-border tb-tw tb-tw--comfortable" style="background:#241430;">
  <span class="font-bold">Planner</span>
  <input type="text" placeholder="Search..." class="flex-1 max-w-[220px] box-border border border-[#FAF7F2]/25 bg-[#FAF7F2]/10 text-[#FAF7F2] rounded-md px-2.5 py-1.5 placeholder:text-[#FAF7F2]/60 focus-visible:outline focus-visible:outline-2" />
  <div class="flex gap-2 ml-auto">
    <button type="button" class="bg-transparent border-none text-[#FAF7F2] cursor-pointer text-sm px-2 py-1 rounded-md hover:bg-[#FAF7F2]/10">＋</button>
    <button type="button" class="bg-transparent border-none text-[#FAF7F2] cursor-pointer text-sm px-2 py-1 rounded-md hover:bg-[#FAF7F2]/10">⚙</button>
  </div>
</div>
<style>
.tb-tw--compact { padding: 6px 12px !important; gap: 8px; font-size: 12px; }
</style>

react

export function Topbar({
  title = "Planner",
  density = "comfortable",
  accent = "#241430",
  search = true,
}) {
  const compact = density === "compact";
  return (
    <div style={{ display: "flex", alignItems: "center", gap: compact ? 8 : 12, fontFamily: "system-ui, sans-serif", fontSize: compact ? 12 : 13, color: "#FAF7F2", background: accent, padding: compact ? "6px 12px" : "12px 16px", boxSizing: "border-box" }}>
      <span style={{ fontWeight: 700 }}>{title}</span>
      {search && <input type="text" placeholder="Search..." style={{ flex: 1, maxWidth: 220, boxSizing: "border-box", border: "1px solid #FAF7F244", background: "#FAF7F21a", color: "#FAF7F2", borderRadius: 6, padding: "6px 10px", font: "inherit" }} />}
      <div style={{ display: "flex", gap: 8, marginLeft: "auto" }}>
        <button type="button" style={{ background: "transparent", border: "none", color: "#FAF7F2", cursor: "pointer", fontSize: 14, padding: "4px 8px", borderRadius: 6 }}>＋</button>
        <button type="button" style={{ background: "transparent", border: "none", color: "#FAF7F2", cursor: "pointer", fontSize: 14, padding: "4px 8px", borderRadius: 6 }}>⚙</button>
      </div>
    </div>
  );
}