Something went wrong. Try again.
Central platform for European atproto.<cc> country community websites atproto.eu
community atproto
Something went wrong. Try again.
2.2 kB · 70 lines
Astro
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071---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} data-follow-label={t('action.follow')} aria-pressed="false" hidden>{t('action.follow')}</button> </div> </div></article>