25 lines
563 B
Svelte
25 lines
563 B
Svelte
<script>
|
|
export let value = 0;
|
|
export let name = '';
|
|
export let size = 'base'; // 'base', 'lg', 'xl'
|
|
|
|
let sizeClass = {
|
|
base: 'text-2xl',
|
|
lg: 'text-3xl',
|
|
xl: 'text-4xl'
|
|
}[size] || 'text-2xl';
|
|
</script>
|
|
|
|
<div class="flex items-center gap-1">
|
|
{#each Array(5) as _, i}
|
|
<button
|
|
type="button"
|
|
class={`focus:outline-none ${sizeClass}`}
|
|
on:click={() => value = i + 1}
|
|
aria-label="{name} {i + 1} stars"
|
|
>
|
|
<span class={i < value ? 'text-yellow-400' : 'text-gray-300'}>★</span>
|
|
</button>
|
|
{/each}
|
|
</div>
|