File size: 2,186 Bytes
e903a32 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
---
interface Props {
username: string;
name?: string;
url?: string;
avatarUrl?: string;
}
const { username, name, url, avatarUrl } = Astro.props as Props;
const profileUrl = url ?? `https://huggingface.co/${encodeURIComponent(username)}`;
const displayName = name ?? username;
const imgSrc = avatarUrl ?? `https://huggingface.co/api/users/${encodeURIComponent(username)}/avatar`;
---
<div class="hf-user">
<div class="hf-user__left">
<img
class="hf-user__avatar"
src={imgSrc}
alt={`${displayName} avatar`}
width="44"
height="44"
loading="lazy"
decoding="async"
referrerpolicy="no-referrer"
/>
<span class="hf-user__text">
<a class="hf-user__name" href={profileUrl} target="_blank" rel="noopener noreferrer">{displayName}</a>
<span class="hf-user__row">
<a class="hf-user__username" href={profileUrl} target="_blank" rel="noopener noreferrer">@{username}</a>
</span>
</span>
</div>
</div>
<style>
.hf-user {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 10px 10px 12px;
border-radius: 12px;
box-shadow: none;
}
.hf-user__left {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: inherit;
}
.hf-user__avatar {
display: block;
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12) inset;
}
.hf-user__text {
display: flex;
flex-direction: column;
line-height: 1.1;
}
.hf-user__row {
display: inline-flex;
align-items: center;
white-space: nowrap;
}
.hf-user__name {
font-size: 14px;
font-weight: 700;
}
.hf-user__username {
font-size: 12px;
color: var(--muted-color);
text-decoration: underline!important;
text-underline-offset: 2px;
text-decoration-thickness: 0.06em;
text-decoration-color: var(--link-underline);
}
.hf-user a {
color: inherit;
text-decoration: none;
border-bottom: none;
}
</style>
<style is:global>
.hf-user-list {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
</style>
|