Something went wrong. Try again.
Website hub for the atmosphere community, aggregating posts, events, regional, and more
Something went wrong. Try again.
2.3 kB · 58 lines
Astro
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758---interface Props { kind: 'event' | 'document';}---<span class:list={['share-row__mark', `share-row__mark--${Astro.props.kind}`]}> {Astro.props.kind === 'event' ? ( <svg aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <g fill="currentColor"> <path d="M16 2a1 1 0 0 1 .993.883L17 3v1h1a3 3 0 0 1 2.995 2.824L21 7v12a3 3 0 0 1-2.824 2.995L18 22H6a3 3 0 0 1-2.995-2.824L3 19V7a3 3 0 0 1 2.824-2.995L6 4h1V3a1 1 0 0 1 1.993-.117L9 3v1h6V3a1 1 0 0 1 1-1m3 7H5v9.625c0 .705.386 1.286.883 1.366L6 20h12c.513 0 .936-.53.993-1.215l.007-.16z"/> <path d="M12 12a1 1 0 0 1 .993.883L13 13v3a1 1 0 0 1-1.993.117L11 16v-2a1 1 0 0 1-.117-1.993L11 12z"/> </g> </svg> ) : ( <svg aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <g class="document-outline"> <g fill="currentColor" fill-rule="evenodd" class="Vector" clip-rule="evenodd"> <path d="M15.143 22H8.286A4.286 4.286 0 0 1 4 17.714V6.286A4.286 4.286 0 0 1 8.286 2h4.008a3.5 3.5 0 0 1 2.304.866l3.635 3.18a3.5 3.5 0 0 1 1.196 2.635v9.033A4.286 4.286 0 0 1 15.143 22m0-2H8.286A2.286 2.286 0 0 1 6 17.714V6.286A2.286 2.286 0 0 1 8.286 4h4.008a1.5 1.5 0 0 1 .987.371l3.635 3.18a1.5 1.5 0 0 1 .513 1.13v9.033A2.286 2.286 0 0 1 15.143 20"/> <path d="M13 3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h2.5a1 1 0 1 1 0 2H15a3 3 0 0 1-3-3V4a1 1 0 0 1 1-1"/> </g> </g> </svg> )} <span class="visually-hidden"> {Astro.props.kind === 'event' ? 'Event' : 'Content'} </span></span>
<style> .share-row__mark { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0.25rem; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--foreground-secondary); line-height: 1; }
.share-row__mark svg { flex-shrink: 0; width: 24px; height: 24px; }
.share-row__mark--event { background: var(--warning-muted); color: var(--warning-muted-foreground); }
.share-row__mark--document { background: var(--info-muted); color: var(--info-muted-foreground); }</style>