Central platform for European atproto.<cc> country community websites
Something went wrong. Try again.
2.1 kB · 69 lines
Astro
at main
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970---import type { Member } from '../lib/atproto/home';import { useTranslations, type Lang } from '../i18n/ui';
interface Props { member: Member; lang?: Lang;}
const { member, lang = 'en' } = Astro.props;const t = useTranslations(lang);const profileUrl = `https://mu.social/profile/${member.handle}`;
const role = member.sifa?.title;const company = member.sifa?.company;const location = member.sifa?.location;const apps = member.sifa?.apps;const hasSifa = Boolean(role || company || location || apps?.length);const sifaUrl = `https://sifa.id/p/${member.handle}`;---
<article class="member-card"> { member.avatar && ( <img class="member-avatar" src={member.avatar} alt="" width="48" height="48" loading="lazy" /> ) } <div class="member-body"> <p class="member-name">{member.displayName ?? member.handle}</p> <p class="member-handle" title={`@${member.handle}`}>@{member.handle}</p>
{ hasSifa ? ( <> {/* Title only, never the Sifa-derived company: members volunteer here as individuals and do not necessarily represent their employer. */} {role && <p class="member-role">{role}</p>} {location && <p class="member-loc">{location}</p>} { apps?.length && ( <> <p class="apps-label">{t('card.activeOn')}</p> <div class="member-apps"> {apps.map((a) => ( <span class="app-chip" title={a.category}>{a.name}</span> ))} </div> </> ) } </> ) : ( member.description && <p class="member-bio">{member.description}</p> ) }
<div class="member-links"> {hasSifa && <a class="member-link" href={sifaUrl} rel="noopener">Sifa</a>} <a class="member-link" href={profileUrl} rel="noopener">Bluesky</a> <button class="follow-btn" type="button" data-did={member.did} data-profile-url={profileUrl} aria-pressed="false" hidden>Follow</button> </div> </div></article>