src/components/ui/Skeleton.astro
---
// Skeleton, recovered from blurr-components.pages.dev
---
<div class="preview-wrapper--centered"> <div style="display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;width:100%;max-width:600px"> <div><p style="font-size: 1rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-muted);margin-bottom:.75rem">Text</p><div class="sk-text sk-text--md" data-component="skeleton"><div class="sk sk--text" style=""></div><div class="sk sk--text" style=""></div><div class="sk sk--text" style=""></div><div class="sk sk--text" style="width:65%"></div></div></div> <div><p style="font-size: 1rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-muted);margin-bottom:.75rem">Card</p><div class="sk-card sk-card--md" data-component="skeleton"><div class="sk sk--image" style="height:160px"></div><div class="sk-card__body"><div class="sk sk--text" style="width:40%;height:12px;margin-bottom:.5rem"></div><div class="sk sk--text"></div><div class="sk sk--text" style="width:80%"></div><div class="sk sk--text" style="width:60%"></div></div></div></div> <div><p style="font-size: 1rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-muted);margin-bottom:.75rem">Avatar</p><div class="sk-avatar-row" data-component="skeleton"><div class="sk sk--avatar sk--circle" style=""></div><div class="sk-avatar-text"><div class="sk sk--text" style="width:120px"></div><div class="sk sk--text" style="width:80px"></div></div></div></div> <div><p style="font-size: 1rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-muted);margin-bottom:.75rem">Image</p><div class="sk sk--image" data-component="skeleton" style="width:100%;height:120px"></div></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>