lerobot/robot-learning-tutorial

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