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 · 104 lines
Astro
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105---import { actions } from 'astro:actions';
interface Props { repo: string; inputId: string; placeholder: string;}
const { repo, inputId, placeholder } = Astro.props;---
<form class="share-uri" method="POST" action={actions.shareAtmosphereContent}> <label class="visually-hidden" for={inputId}>Share AT URI</label> <input type="hidden" name="sourceRepo" value={repo} /> <input id={inputId} class="share-uri__input" type="url" name="candidateUri" inputmode="url" placeholder={placeholder} autocomplete="off" required /> <button class="share-uri__button" type="submit">Share</button></form>
<style> .share-uri { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm); padding-top: var(--space-xs); }
.share-uri__input { min-width: 0; min-height: 40px; width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); background: var(--card); color: var(--foreground); font-family: var(--font-body); font-size: var(--text-sm); }
.share-uri__input::placeholder { color: var(--foreground-muted); }
.share-uri__button { min-width: 4rem; min-height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-sm); padding: var(--space-xs) var(--space-sm); background: var(--primary); color: var(--primary-foreground); font: inherit; font-size: var(--text-xs); font-weight: 800; line-height: 1; white-space: nowrap; cursor: pointer; transition: background 0.15s ease; }
.share-uri__button:hover { background: var(--primary-hover); }
.share-uri__button:focus-visible, .share-uri__input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.share-uri__button:disabled { opacity: 0.55; cursor: not-allowed; }
.share-uri__button:disabled:hover { background: var(--primary); }
@media (max-width: 520px) { .share-uri { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
.share-uri__button { width: 100%; } }</style>