feat: added comments

src/lib/components/rating/RatingInput.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { StarHalfSolid, StarSolid } from 'flowbite-svelte-icons';
+	import { twMerge, type ClassNameValue } from 'tailwind-merge';
+
+	let {
+		value = $bindable(5),
+		name,
+		disabled = false,
+		class: className
+	}: { value?: number; name?: string; disabled?: boolean; class?: ClassNameValue } = $props();
+
+	let stars = $derived(
+		[0, 1, 2, 3, 4].map((i) => {
+			if (value - i >= 1) {
+				return { id: i, value: 1 };
+			} else if (value - i >= 0.5) {
+				return { id: i, value: 0.5 };
+			}
+			return { id: i, value: 0 };
+		})
+	);
+</script>
+
+{#if name}
+	<input
+		type="number"
+		{name}
+		bind:value
+		tabindex="-1"
+		style="opacity: 0; position: absolute; pointer-events: none; z-index: -1; bottom: 0; left: 50%; height: 0; width: 0;"
+	/>
+{/if}
+
+<span class={twMerge('flex justify-between ', className)}>
+	<!-- es -->
+	{#each stars as s (s.id)}
+		<button
+			type="button"
+			{disabled}
+			onclick={() => {
+				if (s.id === 0 && value == 0.5) {
+					value = 0;
+					return;
+				}
+				if (value === s.id + 1) {
+					value = s.id + 0.5;
+					return;
+				}
+				value = s.id + 1;
+			}}
+			class="grid grid-cols-2 grid-rows-1"
+		>
+			{#if s.value >= 1}
+				<StarSolid class="col-span-2 text-amber-400" />
+			{:else}
+				<StarSolid class="col-span-2 col-start-1 row-start-1" />
+				{#if s.value >= 0.5}
+					<StarHalfSolid class="col-span-1 col-start-1 row-start-1 text-amber-400" />
+				{/if}
+			{/if}
+		</button>
+	{/each}
+</span>