an app to share curated trails
sidetrail.app
1import Link from "next/link";
2import "./UserBadge.css";
3
4interface UserBadgeProps {
5 handle: string;
6 avatar?: string;
7 name?: string;
8 showAvatar?: boolean;
9 asLink?: boolean;
10}
11
12export function UserBadge({ handle, avatar, showAvatar = true, asLink = true }: UserBadgeProps) {
13 const content = (
14 <>
15 {showAvatar && avatar && <img src={avatar} alt={handle} className="UserBadge-avatar" />}
16 <span className="UserBadge-handle">@{handle}</span>
17 </>
18 );
19
20 if (!asLink) {
21 return <span className="UserBadge UserBadge--nolink">{content}</span>;
22 }
23
24 return (
25 <Link href={`/@${handle}`} className="UserBadge" prefetch={false}>
26 {content}
27 </Link>
28 );
29}