21 lines
1013 B
TypeScript
21 lines
1013 B
TypeScript
import { useMemo } from 'react';
|
|
import { badgesOf, type Badge } from '@/lib/roles';
|
|
import { useWorkspace } from '@/store/workspace';
|
|
import styles from './RoleBadges.module.css';
|
|
|
|
function List({ items }: { items: Badge[] }) {
|
|
return <>{items.map((badge) => <span key={badge.key} className={`${styles.badge} ${styles[badge.color]}`}>{badge.text}</span>)}</>;
|
|
}
|
|
|
|
/** 名字前后的身份标签:空间主固定一个,其余是身份组里自定义的前缀、后缀 */
|
|
export function useBadges(username: string | undefined): { prefix: Badge[]; suffix: Badge[] } {
|
|
const roles = useWorkspace((s) => s.roles);
|
|
const creator = useWorkspace((s) => s.channel?.creatorAccount);
|
|
return useMemo(() => badgesOf(roles, username, creator), [roles, username, creator]);
|
|
}
|
|
|
|
export function NameWithBadges({ username, children }: { username: string | undefined; children: React.ReactNode }) {
|
|
const { prefix, suffix } = useBadges(username);
|
|
return <><List items={prefix} />{children}<List items={suffix} /></>;
|
|
}
|