src/components/ui/Rating.astro
---
// Rating, recovered from blurr-components.pages.dev
---
<div class="preview-wrapper--centered"> <div style="display:flex;flex-direction:column;gap:1.25rem;align-items:flex-start"> <!-- Display only -->
<div class="rt rt--lg" data-component="rating" data-value="5" aria-label="5 van 5 sterren"><div class="rt__stars-display"><svg class="rt__star rt__star--filled" viewBox="0 0 24 24"><defs><linearGradient id="half-0"><stop offset="50%" stop-color="currentColor"></stop><stop offset="50%" stop-color="transparent"></stop></linearGradient></defs><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="currentColor" stroke="currentColor" stroke-width="1.5"></path></svg><svg class="rt__star rt__star--filled" viewBox="0 0 24 24"><defs><linearGradient id="half-1"><stop offset="50%" stop-color="currentColor"></stop><stop offset="50%" stop-color="transparent"></stop></linearGradient></defs><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="currentColor" stroke="currentColor" stroke-width="1.5"></path></svg><svg class="rt__star rt__star--filled" viewBox="0 0 24 24"><defs><linearGradient id="half-2"><stop offset="50%" stop-color="currentColor"></stop><stop offset="50%" stop-color="transparent"></stop></linearGradient></defs><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="currentColor" stroke="currentColor" stroke-width="1.5"></path></svg><svg class="rt__star rt__star--filled" viewBox="0 0 24 24"><defs><linearGradient id="half-3"><stop offset="50%" stop-color="currentColor"></stop><stop offset="50%" stop-color="transparent"></stop></linearGradient></defs><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="currentColor" stroke="currentColor" stroke-width="1.5"></path></svg><svg class="rt__star rt__star--filled" viewBox="0 0 24 24"><defs><linearGradient id="half-4"><stop offset="50%" stop-color="currentColor"></stop><stop offset="50%" stop-color="transparent"></stop></linearGradient></defs><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="currentColor" stroke="currentColor" stroke-width="1.5"></path></svg></div><div class="rt__meta"><span class="rt__value">5</span><span class="rt__count">(248)</span></div></div> <!-- Display only -->
<div class="rt rt--md" data-component="rating" data-value="4.5" aria-label="4.5 van 5 sterren"><div class="rt__stars-display"><svg class="rt__star rt__star--filled" viewBox="0 0 24 24"><defs><linearGradient id="half-0"><stop offset="50%" stop-color="currentColor"></stop><stop offset="50%" stop-color="transparent"></stop></linearGradient></defs><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="currentColor" stroke="currentColor" stroke-width="1.5"></path></svg><svg class="rt__star rt__star--filled" viewBox="0 0 24 24"><defs><linearGradient id="half-1"><stop offset="50%" stop-color="currentColor"></stop><stop offset="50%" stop-color="transparent"></stop></linearGradient></defs><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="currentColor" stroke="currentColor" stroke-width="1.5"></path></svg><svg class="rt__star rt__star--filled" viewBox="0 0 24 24"><defs><linearGradient id="half-2"><stop offset="50%" stop-color="currentColor"></stop><stop offset="50%" stop-color="transparent"></stop></linearGradient></defs><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="currentColor" stroke="currentColor" stroke-width="1.5"></path></svg><svg class="rt__star rt__star--filled" viewBox="0 0 24 24"><defs><linearGradient id="half-3"><stop offset="50%" stop-color="currentColor"></stop><stop offset="50%" stop-color="transparent"></stop></linearGradient></defs><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="currentColor" stroke="currentColor" stroke-width="1.5"></path></svg><svg class="rt__star rt__star--half" viewBox="0 0 24 24"><defs><linearGradient id="half-4"><stop offset="50%" stop-color="currentColor"></stop><stop offset="50%" stop-color="transparent"></stop></linearGradient></defs><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="url(#half-4)" stroke="currentColor" stroke-width="1.5"></path></svg></div><div class="rt__meta"><span class="rt__value">4.5</span><span class="rt__count">(127)</span></div></div> <!-- Display only -->
<div class="rt rt--sm" data-component="rating" data-value="3.5" aria-label="3.5 van 5 sterren"><div class="rt__stars-display"><svg class="rt__star rt__star--filled" viewBox="0 0 24 24"><defs><linearGradient id="half-0"><stop offset="50%" stop-color="currentColor"></stop><stop offset="50%" stop-color="transparent"></stop></linearGradient></defs><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="currentColor" stroke="currentColor" stroke-width="1.5"></path></svg><svg class="rt__star rt__star--filled" viewBox="0 0 24 24"><defs><linearGradient id="half-1"><stop offset="50%" stop-color="currentColor"></stop><stop offset="50%" stop-color="transparent"></stop></linearGradient></defs><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="currentColor" stroke="currentColor" stroke-width="1.5"></path></svg><svg class="rt__star rt__star--filled" viewBox="0 0 24 24"><defs><linearGradient id="half-2"><stop offset="50%" stop-color="currentColor"></stop><stop offset="50%" stop-color="transparent"></stop></linearGradient></defs><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="currentColor" stroke="currentColor" stroke-width="1.5"></path></svg><svg class="rt__star rt__star--half" viewBox="0 0 24 24"><defs><linearGradient id="half-3"><stop offset="50%" stop-color="currentColor"></stop><stop offset="50%" stop-color="transparent"></stop></linearGradient></defs><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="url(#half-3)" stroke="currentColor" stroke-width="1.5"></path></svg><svg class="rt__star" viewBox="0 0 24 24"><defs><linearGradient id="half-4"><stop offset="50%" stop-color="currentColor"></stop><stop offset="50%" stop-color="transparent"></stop></linearGradient></defs><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="none" stroke="currentColor" stroke-width="1.5"></path></svg></div><div class="rt__meta"></div></div> <!-- Interactive (input) -->
<div class="rt rt--lg rt--interactive" data-component="rating" data-value="0"><span class="rt__label">Geef een beoordeling</span><div class="rt__stars" role="radiogroup" aria-label="Geef een beoordeling"><label class="rt__star-label" title="1 ster"><input type="radio" name="preview-rating" value="1" class="rt__input"><svg class="rt__star" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path></svg></label><label class="rt__star-label" title="2 sterren"><input type="radio" name="preview-rating" value="2" class="rt__input"><svg class="rt__star" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path></svg></label><label class="rt__star-label" title="3 sterren"><input type="radio" name="preview-rating" value="3" class="rt__input"><svg class="rt__star" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path></svg></label><label class="rt__star-label" title="4 sterren"><input type="radio" name="preview-rating" value="4" class="rt__input"><svg class="rt__star" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path></svg></label><label class="rt__star-label" title="5 sterren"><input type="radio" name="preview-rating" value="5" class="rt__input"><svg class="rt__star" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path></svg></label></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>