src/components/ui/Toggle.astro
---
// Toggle, recovered from blurr-components.pages.dev
---
<div class="preview-wrapper--centered"> <div style="display:flex;flex-direction:column;gap:1.25rem"> <div class="tg tg--sm tg--label-right" data-component="toggle"> <label class="tg__label-wrap" for="toggle-yqoq0"> <input type="checkbox" id="toggle-yqoq0" class="tg__input" checked role="switch" aria-checked="true"> <span class="tg__track" aria-hidden="true"> <span class="tg__thumb"></span> </span> <div class="tg__text"> <span class="tg__label">Meldingen inschakelen</span> </div> </label> </div> <div class="tg tg--md tg--label-right" data-component="toggle"> <label class="tg__label-wrap" for="toggle-i5b0e"> <input type="checkbox" id="toggle-i5b0e" class="tg__input" role="switch" aria-checked="false"> <span class="tg__track" aria-hidden="true"> <span class="tg__thumb"></span> </span> <div class="tg__text"> <span class="tg__label">Dark mode</span> </div> </label> </div> <div class="tg tg--lg tg--label-right" data-component="toggle"> <label class="tg__label-wrap" for="toggle-fyiv0"> <input type="checkbox" id="toggle-fyiv0" class="tg__input" checked role="switch" aria-checked="true"> <span class="tg__track" aria-hidden="true"> <span class="tg__thumb"></span> </span> <div class="tg__text"> <span class="tg__label">E-mail updates</span> </div> </label> </div> <div class="tg tg--md tg--label-right tg--disabled" data-component="toggle"> <label class="tg__label-wrap" for="toggle-d8at5"> <input type="checkbox" id="toggle-d8at5" class="tg__input" disabled role="switch" aria-checked="false"> <span class="tg__track" aria-hidden="true"> <span class="tg__thumb"></span> </span> <div class="tg__text"> <span class="tg__label">Uitgeschakeld</span> </div> </label> </div> </div> </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>