Progress bar styling

src/components/ui/progress/Progress.vue

@@ -2,6 +2,7 @@
 import { computed } from "vue";
 import { ProgressIndicator, ProgressRoot } from "radix-vue";
 import { cn } from "@/lib/utils";
+import { boolean } from "zod";
 
 const props = defineProps({
   modelValue: { type: [Number, null], required: false, default: 0 },
@@ -11,6 +12,7 @@ const props = defineProps({
   as: { type: null, required: false },
   class: { type: null, required: false },
   textLabel: { type: String, default: "" },
+  failed: { type: boolean, default: false, required: false },
 });
 
 const delegatedProps = computed(() => {
@@ -22,16 +24,17 @@ const delegatedProps = computed(() => {
 
 <template>
   <ProgressRoot
+    v-if="!failed"
     v-bind="delegatedProps"
     :class="
       cn(
-        'relative h-4 w-full overflow-hidden rounded-full bg-slate-100 dark:bg-slate-800 border-solid border-2 border-slate-300',
+        'relative h-4 w-full overflow-hidden rounded-full bg-slate-100 dark:bg-slate-800 border-solid border-2 border-primary-dark',
         props.class
       )
     "
   >
     <div
-      class="absolute inset-0 flex items-center justify-center font-medium text-2xl z-50 text-black"
+      class="absolute inset-0 flex items-center justify-center font-medium text-2xl z-50 text-darkest"
     >
       <strong>{{ textLabel }}</strong>
     </div>
@@ -40,4 +43,24 @@ const delegatedProps = computed(() => {
       :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
     />
   </ProgressRoot>
+  <ProgressRoot
+    v-else
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'relative h-4 w-full overflow-hidden rounded-full bg-slate-100 dark:bg-slate-800 border-solid border-2 border-red-500',
+        props.class
+      )
+    "
+  >
+    <div
+      class="absolute inset-0 flex items-center justify-center font-medium text-2xl z-50 text-darkest"
+    >
+      <strong>{{ textLabel }}</strong>
+    </div>
+    <ProgressIndicator
+      class="rounded-full h-full w-full flex-1 bg-red-500 transition-all dark:bg-slate-50"
+      :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
+    />
+  </ProgressRoot>
 </template>