Something went wrong. Try again.
A Bsky-like frontend using the atprotocol natively.
Something went wrong. Try again.
1.0 kB · 38 lines
TSX
at main
123456789101112131415161718192021222324252627282930313233343536373839import type { Label } from '../api/types';import { useResolvedLabels } from '../labels/useResolvedLabels';import './UserLabels.css';
interface UserLabelsProps { labels: Label[] | undefined;}
export default function UserLabels({ labels }: UserLabelsProps) { const resolved = useResolvedLabels(labels);
if (resolved.length === 0) return null;
return ( <div className="user-labels"> {resolved.map((label, i) => ( <span key={`${label.val}:${label.labelerName}:${i}`} className="user-label" title={`Label from ${label.labelerName}: ${label.displayName}`} > {label.labelerAvatar ? ( <img className="user-label-icon" src={label.labelerAvatar} alt="" loading="lazy" /> ) : ( <span className="user-label-icon-placeholder">•</span> )} <span className="user-label-text">{label.displayName}</span> </span> ))} </div> );}