Assigns responsibility.
<details class="assignee assignee--assigned" style="--c:#A8E6C1;">
<summary class="assignee__summary">
<span class="assignee__avatar" style="width:32px;height:32px;font-size:calc(32px * 0.4);" aria-hidden="true"><span class="assignee__initials">PN</span></span>
<span class="assignee__text">
<strong class="assignee__name">Priya Nair</strong>
<span class="assignee__meta">Design · <span class="assignee__state">assigned</span></span>
</span>
</summary>
<ul class="assignee__list">
<li><button type="button" class="assignee__option">Alex Chen — Design</button></li>
<li><button type="button" class="assignee__option">Jordan Lee — Design</button></li>
<li><button type="button" class="assignee__option assignee__option--clear">Unassign</button></li>
</ul>
</details>
<style>
.assignee { font: 14px/1.4 system-ui, sans-serif; color: #241430; max-width: 260px; }
.assignee__summary { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1.5px solid var(--c); border-radius: 10px; cursor: pointer; list-style: none; background: #FAF7F2; }
.assignee__summary::-webkit-details-marker { display: none; }
.assignee__summary:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.assignee__avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--c); font-weight: 700; flex: none; }
.assignee--unassigned .assignee__avatar { background: transparent; border: 2px dashed var(--c); }
.assignee--pending .assignee__avatar { background: #FAF7F2; border: 2px solid var(--c); }
.assignee--unassigned .assignee__initials, .assignee--pending .assignee__initials { display: none; }
.assignee__meta { display: block; font-size: 12px; opacity: .7; }
.assignee--assigned .assignee__state::before { content: "Assigned"; }
.assignee--unassigned .assignee__state::before { content: "Unassigned"; }
.assignee--pending .assignee__state::before { content: "Pending review"; }
.assignee__list { margin: 6px 0 0; padding: 6px; border: 1px solid #24143022; border-radius: 10px; list-style: none; display: grid; gap: 4px; }
.assignee__option { width: 100%; text-align: left; background: none; border: none; padding: 6px 8px; border-radius: 6px; font: inherit; cursor: pointer; color: #241430; }
.assignee__option:hover, .assignee__option:focus-visible { background: color-mix(in srgb, var(--c) 25%, #FAF7F2); outline: none; }
.assignee__option--clear { color: #b3261e; }
</style><details class="assignee-tw assignee-tw--assigned max-w-xs font-sans text-[#241430]" style="--c:#A8E6C1;">
<summary class="flex items-center gap-2.5 px-2.5 py-2 border-[1.5px] rounded-[10px] cursor-pointer list-none bg-[#FAF7F2]" style="border-color:var(--c);">
<span class="assignee-tw__avatar inline-flex items-center justify-center rounded-full font-bold flex-none" style="width:32px;height:32px;font-size:calc(32px * 0.4);background:var(--c);" aria-hidden="true"><span class="assignee-tw__initials">PN</span></span>
<span>
<strong class="block">Priya Nair</strong>
<span class="block text-xs opacity-70">Design · <span class="assignee-tw__state"></span></span>
</span>
</summary>
<ul class="mt-1.5 p-1.5 border border-[#24143022] rounded-[10px] list-none grid gap-1">
<li><button type="button" class="w-full text-left bg-transparent border-none px-2 py-1.5 rounded-md hover:bg-black/5 focus-visible:outline-2">Alex Chen — Design</button></li>
<li><button type="button" class="w-full text-left bg-transparent border-none px-2 py-1.5 rounded-md hover:bg-black/5 focus-visible:outline-2">Jordan Lee — Design</button></li>
<li><button type="button" class="w-full text-left bg-transparent border-none px-2 py-1.5 rounded-md text-red-700 hover:bg-black/5">Unassign</button></li>
</ul>
</details>
<style>
.assignee-tw--unassigned .assignee-tw__avatar { background: transparent !important; border: 2px dashed var(--c); }
.assignee-tw--pending .assignee-tw__avatar { background: #FAF7F2 !important; border: 2px solid var(--c); }
.assignee-tw--unassigned .assignee-tw__initials, .assignee-tw--pending .assignee-tw__initials { display: none; }
.assignee-tw--assigned .assignee-tw__state::before { content: "Assigned"; }
.assignee-tw--unassigned .assignee-tw__state::before { content: "Unassigned"; }
.assignee-tw--pending .assignee-tw__state::before { content: "Pending review"; }
</style>export function AssigneeSelector({
name = "Priya Nair",
team = "Design",
state = "assigned",
color = "#A8E6C1",
size = 32,
}) {
const stateText = { assigned: "Assigned", unassigned: "Unassigned", pending: "Pending review" }[state] ?? "Assigned";
const avatarStyle = {
assigned: { background: color },
unassigned: { background: "transparent", border: `2px dashed ${color}` },
pending: { background: "#FAF7F2", border: `2px solid ${color}` },
}[state] ?? {};
return (
<details style={{ font: "14px/1.4 system-ui, sans-serif", color: "#241430", maxWidth: 260 }}>
<summary style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 10px", border: `1.5px solid ${color}`, borderRadius: 10, cursor: "pointer", listStyle: "none", background: "#FAF7F2" }}>
<span aria-hidden="true" style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: size, height: size, borderRadius: "50%", fontWeight: 700, flex: "none", fontSize: size * 0.4, ...avatarStyle }}>
{state === "assigned" ? "PN" : ""}
</span>
<span>
<strong style={{ display: "block" }}>{name}</strong>
<span style={{ display: "block", fontSize: 12, opacity: 0.7 }}>{team} · {stateText}</span>
</span>
</summary>
<ul style={{ margin: "6px 0 0", padding: 6, border: "1px solid #24143022", borderRadius: 10, listStyle: "none", display: "grid", gap: 4 }}>
<li><button type="button" style={{ width: "100%", textAlign: "left", background: "none", border: "none", padding: "6px 8px", borderRadius: 6, cursor: "pointer", color: "#241430" }}>Alex Chen — Design</button></li>
<li><button type="button" style={{ width: "100%", textAlign: "left", background: "none", border: "none", padding: "6px 8px", borderRadius: 6, cursor: "pointer", color: "#241430" }}>Jordan Lee — Design</button></li>
<li><button type="button" style={{ width: "100%", textAlign: "left", background: "none", border: "none", padding: "6px 8px", borderRadius: 6, cursor: "pointer", color: "#b3261e" }}>Unassign</button></li>
</ul>
</details>
);
}