Ownership Selector

Assigns ownership.

html

<div class="ownersel ownersel--owner" style="--c:#F5C2E0;">
  <span class="ownersel__avatar" aria-hidden="true">PN</span>
  <span class="ownersel__text">
    <strong>Priya Nair</strong>
    <span class="ownersel__meta">Platform · <span class="ownersel__role"></span></span>
  </span>
  <button type="button" class="ownersel__transfer">Transfer</button>
</div>
<style>
.ownersel { display: flex; align-items: center; gap: 10px; font: 14px/1.4 system-ui, sans-serif; color: #241430; max-width: 300px; }
.ownersel__avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c); font-weight: 700; flex: none; }
.ownersel__meta { display: block; font-size: 12px; opacity: .75; }
.ownersel--owner .ownersel__role::before { content: "Owner"; font-weight: 700; }
.ownersel--co-owner .ownersel__role::before { content: "Co-owner"; }
.ownersel--delegate .ownersel__role::before { content: "Delegate"; font-style: italic; }
.ownersel__transfer { margin-left: auto; background: transparent; border: 1.5px solid var(--c); border-radius: 8px; padding: 6px 10px; font: 500 13px system-ui, sans-serif; cursor: pointer; color: #241430; }
.ownersel__transfer:hover, .ownersel__transfer:focus-visible { background: color-mix(in srgb, var(--c) 25%, #FAF7F2); outline: none; }
</style>

tailwind

<div class="ownersel-tw ownersel-tw--owner flex items-center gap-2.5 font-sans text-[#241430] max-w-xs" style="--c:#F5C2E0;">
  <span class="inline-flex items-center justify-center w-[34px] h-[34px] rounded-full font-bold flex-none" style="background:var(--c);" aria-hidden="true">PN</span>
  <span>
    <strong class="block">Priya Nair</strong>
    <span class="block text-xs opacity-75">Platform · <span class="ownersel-tw__role"></span></span>
  </span>
  <button type="button" class="ml-auto bg-transparent border-[1.5px] rounded-lg px-2.5 py-1.5 text-[13px] font-medium cursor-pointer" style="border-color:var(--c);">Transfer</button>
</div>
<style>
.ownersel-tw--owner .ownersel-tw__role::before { content: "Owner"; font-weight: 700; }
.ownersel-tw--co-owner .ownersel-tw__role::before { content: "Co-owner"; }
.ownersel-tw--delegate .ownersel-tw__role::before { content: "Delegate"; font-style: italic; }
</style>

react

export function OwnershipSelector({
  owner = "Priya Nair",
  role = "owner",
  team = "Platform",
  color = "#F5C2E0",
  transferable = true,
}) {
  const roleText = { owner: "Owner", "co-owner": "Co-owner", delegate: "Delegate" }[role] ?? "Owner";
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10, font: "14px/1.4 system-ui, sans-serif", color: "#241430", maxWidth: 300 }}>
      <span aria-hidden="true" style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 34, height: 34, borderRadius: "50%", background: color, fontWeight: 700, flex: "none" }}>PN</span>
      <span>
        <strong style={{ display: "block" }}>{owner}</strong>
        <span style={{ display: "block", fontSize: 12, opacity: 0.75 }}>{team} · {roleText}</span>
      </span>
      {transferable && (
        <button type="button" style={{ marginLeft: "auto", background: "transparent", border: `1.5px solid ${color}`, borderRadius: 8, padding: "6px 10px", fontSize: 13, fontWeight: 500, cursor: "pointer", color: "#241430" }}>
          Transfer
        </button>
      )}
    </div>
  );
}