Role Selector

Assigns role.

html

<label class="roleselect roleselect--editor" style="--c:#D9C8F0;">
  <span class="roleselect__person">Jordan Lee</span>
  <select class="roleselect__select" >
    <option value="viewer">Viewer</option>
    <option value="editor">Editor</option>
    <option value="admin">Admin</option>
  </select>
  <span class="roleselect__current">current: <span class="roleselect__current-text"></span></span>
  
</label>
<style>
.roleselect { display: flex; align-items: center; gap: 10px; font: 14px/1.4 system-ui, sans-serif; color: #241430; }
.roleselect__select { border: 1.5px solid var(--c); border-radius: 8px; padding: 6px 8px; font: inherit; background: #FAF7F2; color: #241430; }
.roleselect__select:focus-visible { outline: 2px solid var(--c); }
.roleselect__select:disabled { opacity: .6; cursor: not-allowed; }
.roleselect__lock { font-size: 13px; }
.roleselect__current { font-size: 11px; opacity: .7; }
.roleselect--viewer .roleselect__current-text::before { content: "Viewer"; }
.roleselect--editor .roleselect__current-text::before { content: "Editor"; font-weight: 700; color: var(--c); }
.roleselect--admin .roleselect__current-text::before { content: "Admin"; font-weight: 700; color: #E8A020; }
</style>

tailwind

<label class="roleselect-tw roleselect-tw--editor flex items-center gap-2.5 font-sans text-[#241430]" style="--c:#D9C8F0;">
  <span>Jordan Lee</span>
  <select class="border-[1.5px] rounded-lg px-2 py-1.5 bg-[#FAF7F2] text-[#241430] disabled:opacity-60" style="border-color:var(--c);" >
    <option value="viewer">Viewer</option>
    <option value="editor">Editor</option>
    <option value="admin">Admin</option>
  </select>
  <span class="text-[11px] opacity-70">current: <span class="roleselect-tw__current-text"></span></span>
  
</label>
<style>
.roleselect-tw--viewer .roleselect-tw__current-text::before { content: "Viewer"; }
.roleselect-tw--editor .roleselect-tw__current-text::before { content: "Editor"; font-weight: 700; color: var(--c); }
.roleselect-tw--admin .roleselect-tw__current-text::before { content: "Admin"; font-weight: 700; color: #E8A020; }
</style>

react

export function RoleSelector({
  person = "Jordan Lee",
  role = "editor",
  color = "#D9C8F0",
  locked = false,
}) {
  return (
    <label style={{ display: "flex", alignItems: "center", gap: 10, font: "14px/1.4 system-ui, sans-serif", color: "#241430" }}>
      <span>{person}</span>
      <select defaultValue={role} disabled={locked} style={{ border: `1.5px solid ${color}`, borderRadius: 8, padding: "6px 8px", background: "#FAF7F2", color: "#241430", opacity: locked ? 0.6 : 1 }}>
        <option value="viewer">Viewer</option>
        <option value="editor">Editor</option>
        <option value="admin">Admin</option>
      </select>
      {locked && <span aria-hidden="true" style={{ fontSize: 13 }}>🔒</span>}
    </label>
  );
}