Something went wrong. Try again.
Website hub for the atmosphere community, aggregating posts, events, regional, and more
Something went wrong. Try again.
2.8 kB · 116 lines
Astro
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117---import Avatar, { type AvatarSource } from "../Avatar.astro";import BlueskyIcon from "./icons/BlueskyIcon.astro";
interface Props { name: string; handle: string; location: string; description?: string; bluesky?: string; website?: string; avatar: AvatarSource;}
const { name, location, bluesky, website, avatar } = Astro.props;const href = bluesky ?? website;const Tag = href ? "a" : "div";---
<Tag class:list={["community-pill", { "community-pill--link": Boolean(href) }]} {...(href ? { href, rel: "noopener noreferrer", target: "_blank", "aria-label": `${name}${bluesky ? " on Bluesky" : ""}` } : {})}> <Avatar avatar={avatar} size={28} imgClass="community-pill__avatar" fallbackClass="community-pill__dot" /> <div class="community-pill__text"> <span class="community-pill__name">{name}</span> <span class="community-pill__location">{location}</span> </div> {bluesky && ( <span class="community-pill__icon" aria-hidden="true"> <BlueskyIcon /> </span> )}</Tag>
<style> .community-pill { display: inline-flex; align-items: center; gap: var(--space-sm); background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-pill); padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-xs); color: inherit; text-decoration: none; transition: border-color 0.15s ease, transform 0.15s ease, background-color 0.15s ease; }
.community-pill--link:hover { border-color: var(--primary); background: var(--card); }
.community-pill--link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.community-pill :global(.community-pill__avatar) { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.community-pill :global(.community-pill__dot) { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: oklch(98% 0 0); font-size: 8px; font-weight: 700; font-family: var(--font-body); letter-spacing: 0.02em; }
.community-pill__text { display: flex; flex-direction: column; min-width: 0; }
.community-pill__name { font-size: var(--text-xs); font-weight: 600; color: var(--card-foreground); line-height: 1.2; white-space: nowrap; }
.community-pill__location { font-size: 9px; color: var(--foreground-muted); line-height: 1.2; }
.community-pill__icon { flex-shrink: 0; color: var(--primary); display: flex; } .community-pill--link:hover .community-pill__icon { color: var(--primary-hover); }</style>