42 lines
4.1 KiB
HTML
42 lines
4.1 KiB
HTML
<div x-data="{ currentVal: 3 }" class="flex items-center gap-1">
|
|
<label for="oneStar" class="transition hover:scale-125 has-focus:scale-125">
|
|
<span class="sr-only">one star</span>
|
|
<input x-model="currentVal" id="oneStar" type="radio" class="sr-only" name="rating" value="1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" fill="currentColor" class="size-5" x-bind:class="currentVal > 0 ? 'text-amber-500' : 'text-onSurface dark:text-onSurfaceDark'">
|
|
<path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd">
|
|
</svg>
|
|
</label>
|
|
|
|
<label for="twoStars" class="transition hover:scale-125 has-focus:scale-125">
|
|
<span class="sr-only">two stars</span>
|
|
<input x-model="currentVal" id="twoStars" type="radio" class="sr-only" name="rating" value="2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" fill="currentColor" class="size-5" x-bind:class="currentVal > 1 ? 'text-amber-500' : 'text-on-surface dark:text-on-surface-dark'">
|
|
<path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd">
|
|
</svg>
|
|
</label>
|
|
|
|
<label for="threeStars" class="transition hover:scale-125 has-focus:scale-125">
|
|
<span class="sr-only">three stars</span>
|
|
<input x-model="currentVal" id="threeStars" type="radio" class="sr-only" name="rating" value="3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" fill="currentColor" class="size-5" x-bind:class="currentVal > 2 ? 'text-amber-500' : 'text-on-surface dark:text-on-surface-dark'">
|
|
<path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd">
|
|
</svg>
|
|
</label>
|
|
|
|
<label for="fourStars" class="transition hover:scale-125 has-focus:scale-125">
|
|
<span class="sr-only">four stars</span>
|
|
<input x-model="currentVal" id="fourStars" type="radio" class="sr-only" name="rating" value="4">
|
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" fill="currentColor" class="size-5" x-bind:class="currentVal > 3 ? 'text-amber-500' : 'text-on-surface dark:text-on-surface-dark'">
|
|
<path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd">
|
|
</svg>
|
|
</label>
|
|
|
|
<label for="fiveStars" class="transition hover:scale-125 has-focus:scale-125">
|
|
<span class="sr-only">five stars</span>
|
|
<input x-model="currentVal" id="fiveStars" type="radio" class="sr-only" name="rating" value="5">
|
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" fill="currentColor" class="size-5" x-bind:class="currentVal > 4 ? 'text-amber-500' : 'text-on-surface dark:text-on-surface-dark'">
|
|
<path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd">
|
|
</svg>
|
|
</label>
|
|
</div>
|