<template>
    <div class="w-full bg-neutral-200 rounded-full h-2">
        <div class="h-2 rounded-full bg-primary" :style="{ width: `${clampedValue}%` }" />
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
const props = withDefaults(defineProps<{ value?: number }>(), { value: 0 });
const clampedValue = computed(() => Math.max(0, Math.min(100, props.value)));
</script>