Update ProgressBar.vue

src/components/ProgressBar.vue

@@ -1,41 +1,36 @@
 <template>
-    <div class="flex items-center w-48 h-full">
+  <div class="flex items-center w-48 h-full">
-      <div class="relative w-full h-2 bg-gray-200/10 rounded-full overflow-hidden">
+    <div class="relative w-full h-2 bg-gray-200/10 rounded-full overflow-hidden">
-        <div
+      <div :style="{ width: value + '%' }" class="h-full rounded-full" :class="color"></div>
-          :style="{ width: value + '%' }"
-          class="h-full rounded-full"
-          :class="color"
-        ></div>
-      </div>
     </div>
-  </template>
+  </div>
-  
+</template>
-  <script>
+
-  export default {
+<script>
-    name: "ProgressBar",
+export default {
-    props: {
+  name: "ProgressBar",
-      value: {
+  props: {
-        type: Number,
+    value: {
-        required: true,
+      type: Number,
-      },
+      required: true,
-      label: {
-        type: String,
-        default: "Progress",
-      },
-      color: {
-        type: String,
-        default: "bg-blue-500",
-      },
     },
-    computed: {
+    label: {
-      clampedValue() {
+      type: String,
-        return Math.max(0, Math.min(this.value, 100));
+      default: "Progress",
-      },
     },
-  };
+    color: {
-  </script>
+      type: String,
-  
+      default: "bg-blue-500",
-  <style scoped>
+    },
-  /* Optionnel: Ajoutez un style personnalisé ici si nécessaire */
+  },
-  </style>
+  computed: {
-  
+    clampedValue() {
+      return Math.max(0, Math.min(this.value, 100));
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* Optionnel: Ajoutez un style personnalisé ici si nécessaire */
+</style>