Rating

<script lang="ts">
	import Rating from '@tcpsystems/ui/foundation/Rating';
	const uid = $props.id();
	let score = $state(0);
</script>

<form onchange={(event) => score = Number((event.target as HTMLInputElement).value)}>
	<Rating label="How was this deployment?" name={uid} value={score} />
	<p>{score ? `Your score: ${score} of 5` : 'Choose a score.'}</p>
</form>

<script lang="ts">
	import Rating from '@tcpsystems/ui/foundation/Rating';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	const uid = $props.id();
</script>

<Stack>
	<Rating label="Team satisfaction" name={`${uid}-team`} value={4} readonly />
	<Rating label="No reviews yet" name={`${uid}-empty`} value={0} readonly />
</Stack>

<script lang="ts">
	import Rating from '@tcpsystems/ui/foundation/Rating';
	const uid = $props.id();
	let score = $state(8);
</script>

<form onchange={(event) => score = Number((event.target as HTMLInputElement).value)}>
	<Rating label="How likely are you to recommend Studio?" name={uid} max={10} value={score} />
</form>