Widget Filter

Filter affecting one widget.

html

<label class="wfilter wfilter--active" style="--c:#F5C2E0;">
  <span class="wfilter__label">Channel</span>
  <select class="wfilter__select">
    <option>Organic</option>
    <option>All</option>
  </select>
</label>
<style>
.wfilter { display: inline-flex; align-items: center; gap: 6px; font: 12px system-ui, sans-serif; color: #241430; border: 1px solid #24143022; border-radius: 8px; padding: 4px 8px; }
.wfilter--active { border-color: var(--c); background: color-mix(in srgb, var(--c) 16%, #FAF7F2); }
.wfilter__label { opacity: .65; }
.wfilter__select { border: none; background: transparent; font: inherit; color: #241430; }
.wfilter__select:focus-visible { outline: 2px solid var(--c); }
</style>

tailwind

<label class="wfilter-tw wfilter-tw--active inline-flex items-center gap-1.5 font-sans text-xs text-[#241430] border border-[#24143022] rounded-lg px-2 py-1" style="--c:#F5C2E0;">
  <span class="opacity-65">Channel</span>
  <select class="border-none bg-transparent text-[#241430]">
    <option>Organic</option>
    <option>All</option>
  </select>
</label>
<style>
.wfilter-tw--active { border-color: var(--c) !important; background: color-mix(in srgb, var(--c) 16%, #FAF7F2); }
</style>

react

export function WidgetFilter({
  label = "Channel",
  value = "Organic",
  active = true,
  color = "#F5C2E0",
}) {
  return (
    <label style={{
      display: "inline-flex", alignItems: "center", gap: 6, font: "12px system-ui, sans-serif", color: "#241430",
      border: "1px solid " + (active ? color : "#24143022"), borderRadius: 8, padding: "4px 8px",
      background: active ? color + "29" : "transparent",
    }}>
      <span style={{ opacity: 0.65 }}>{label}</span>
      <select defaultValue={value} style={{ border: "none", background: "transparent", color: "#241430" }}>
        <option>{value}</option>
        <option>All</option>
      </select>
    </label>
  );
}