Something went wrong. Try again.
Website hub for the atmosphere community, aggregating posts, events, regional, and more
Something went wrong. Try again.
2.2 kB · 83 lines
Astro
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384---import GlobeIcon from './icons/GlobeIcon.astro';import PinIcon from './icons/PinIcon.astro';
interface Props { mode?: 'inperson' | 'virtual' | 'hybrid'; location?: string;}
const { mode = 'inperson', location } = Astro.props;const isOnline = mode === 'virtual' || mode === 'hybrid';const locationLine = location ?? 'In person';---
{mode === 'hybrid' ? ( <span class="event-card__hybrid" aria-label="Hybrid event"> <span class="event-card__location"> <GlobeIcon class="event-card__location-icon event-card__location-icon--globe" /> <span>Online</span> </span> <span class="event-card__location"> <PinIcon class="event-card__location-icon event-card__location-icon--pin" /> <span>{locationLine}</span> </span> </span>) : isOnline ? ( <span class="event-card__location"> <GlobeIcon class="event-card__location-icon event-card__location-icon--globe" /> <span>Online</span> </span>) : ( <span class="event-card__location"> <PinIcon class="event-card__location-icon event-card__location-icon--pin" /> <span>{locationLine}</span> </span>)}
<style> .event-card__location { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--foreground-secondary); line-height: 1; } .event-card__hybrid, :global(.event-card__footer) > .event-card__location { margin-left: 0; padding: 6px 9px; border-radius: var(--radius-sm); background: color-mix(in oklch, var(--foreground) 3%, var(--card)); } :global(.event-card__location-icon) { flex-shrink: 0; color: var(--foreground-muted); } :global(.event-card__location-icon--globe) { color: var(--info); } :global(.event-card__location-icon--pin) { color: var(--error); }
.event-card__hybrid { position: relative; display: inline-flex; flex-direction: column; gap: 6px; } .event-card__hybrid::before { content: ''; position: absolute; left: -4px; top: 50%; transform: translateY(-50%); height: 22px; width: 9px; border: 1.5px solid var(--border); border-right: none; border-radius: 2px 0 0 2px; }</style>