| 0b4b582 | | | 1 | "use client"; |
| 0b4b582 | | | 2 | |
| 0b4b582 | | | 3 | import { useCollab } from "./collab-provider"; |
| 0b4b582 | | | 4 | |
| 0b4b582 | | | 5 | export function PresenceBar() { |
| 0b4b582 | | | 6 | const { users } = useCollab(); |
| 0b4b582 | | | 7 | const userList = Object.values(users); |
| 0b4b582 | | | 8 | if (userList.length === 0) return null; |
| 0b4b582 | | | 9 | |
| 0b4b582 | | | 10 | return ( |
| 0b4b582 | | | 11 | <div className="flex items-center gap-1"> |
| 0b4b582 | | | 12 | {userList.map((u) => ( |
| 0b4b582 | | | 13 | <span |
| 0b4b582 | | | 14 | key={u.id} |
| 0b4b582 | | | 15 | title={u.name} |
| 0b4b582 | | | 16 | className="flex items-center justify-center text-xs font-medium" |
| 0b4b582 | | | 17 | style={{ |
| 0b4b582 | | | 18 | width: "1.75rem", |
| 0b4b582 | | | 19 | height: "1.75rem", |
| 0b4b582 | | | 20 | borderRadius: "9999px", |
| 0b4b582 | | | 21 | backgroundColor: u.color, |
| 0b4b582 | | | 22 | color: "#fff", |
| 0b4b582 | | | 23 | }} |
| 0b4b582 | | | 24 | > |
| 0b4b582 | | | 25 | {u.name.charAt(0).toUpperCase()} |
| 0b4b582 | | | 26 | </span> |
| 0b4b582 | | | 27 | ))} |
| 0b4b582 | | | 28 | </div> |
| 0b4b582 | | | 29 | ); |
| 0b4b582 | | | 30 | } |