diff options
Diffstat (limited to 'src/components/KaigirokuDougaLink.astro')
| -rw-r--r-- | src/components/KaigirokuDougaLink.astro | 51 |
1 files changed, 51 insertions, 0 deletions
diff --git a/src/components/KaigirokuDougaLink.astro b/src/components/KaigirokuDougaLink.astro new file mode 100644 index 0000000..7695860 --- /dev/null +++ b/src/components/KaigirokuDougaLink.astro @@ -0,0 +1,51 @@ +--- +export interface Props { + kaigirokuHref?: string; + dougaHref?: string; +} +const { kaigirokuHref, dougaHref } = Astro.props; +const mada = kaigirokuHref ? '' : '(まだ公開されていません)'; +--- +<div id="kaigiroku" class="kaigiroku-links"> + {kaigirokuHref ? ( + <a href={kaigirokuHref} rel="noopener noreferrer" target="_blank" class="kgk-link"> + 📄 会議録 + </a> + ) : ( + <span class="kgk-link kgk-pending">📄 会議録{mada}</span> + )} + {dougaHref && ( + <a href={dougaHref} rel="noopener noreferrer" target="_blank" class="kgk-link"> + 🎞️ 動画 + </a> + )} +</div> + +<style> + .kaigiroku-links { + display: flex; + gap: 0.5rem; + margin-bottom: 0.25rem; + flex-wrap: wrap; + } + .kgk-link { + display: inline-flex; + align-items: center; + gap: 0.3rem; + padding: 0.3rem 0.75rem; + border-radius: 100px; + font-size: 0.85em; + font-weight: 500; + text-decoration: none; + background: var(--sl-color-accent-low); + color: var(--sl-color-accent-high); + transition: background 0.15s; + } + .kgk-link:hover { + background: var(--sl-color-accent); + color: #fff; + } + .kgk-pending { + opacity: 0.5; + } +</style> |
