src/components/ui/Modal.astro
---
// Modal — recovered from blurr-components.pages.dev
// blurr-lint-disable H1
---
<!-- blurr-lint-disable H1 -->
<div class="preview-wrapper--centered" style="flex-direction:column;gap:1rem"> <button data-modal-open="preview-modal" style="background:var(--color-accent,#6366f1);color:#fff;border:none;padding:0.625rem 1.5rem;border-radius:0.5rem;font-weight:700;font-size:0.875rem;cursor:pointer">
Open modal →
</button> <dialog class="modal modal--md" id="preview-modal" data-component="modal" aria-labelledby="preview-modal-title"> <div class="modal__inner"> <!-- Header --> <div class="modal__header"> <h2 class="modal__title" id="preview-modal-title">Bevestig actie</h2> <button class="modal__close" aria-label="Sluiten" data-close> <svg width="18" height="18" viewBox="0 0 18 18" fill="none"> <path d="M4 4l10 10M14 4L4 14" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"></path> </svg> </button> </div> <!-- Content --> <div class="modal__body"> <p style="color:var(--color-muted);line-height:1.65">Weet je zeker dat je wilt doorgaan? Deze actie kan niet ongedaan worden gemaakt.</p> </div> <!-- Footer (optional slot) --> <div class="modal__footer"> <div style="display:flex;gap:0.75rem;justify-content:flex-end"> <button onclick="document.getElementById('preview-modal').close()" style="background:rgba(0,0,0,0.06);border:none;padding:0.5rem 1.25rem;border-radius:0.5rem;font-weight:600;cursor:pointer">Annuleren</button> <button style="background:var(--color-accent,#6366f1);color:#fff;border:none;padding:0.5rem 1.25rem;border-radius:0.5rem;font-weight:700;cursor:pointer">Bevestigen</button> </div> </div> </div> </dialog> </div>
<style>
,:before,:after{box-sizing:border-box;margin:0;padding:0}
.preview-wrapper--centered{display:flex;align-items:center;justify-content:center;min-height:200px;padding:2rem;background:#f9f9fb}
</style>