Extract box component

src/components/Box.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class="text-sm relative">
+        <div
+            class="flex items-center justify-center w-6 h-6 rounded-full border-solid border-2 absolute -top-2 -left-2 font-arvo font-bold"
+            :class="[colors[type].container, colors[type].lightText]"
+            v-text="step"
+            v-if="step"
+        ></div>
+        <div class="flex flex-row items-center p-4 border-2 rounded form-group shadow-sm group" :class="[colors[type].container, type]">
+            <div class="flex-grow text-sm" :class="colors[type].text">
+                <slot />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import {ref} from 'vue';
+
+const colors = ref({
+    success: {
+        container: 'bg-green-200 border-green-600',
+        lightText: 'text-green-700',
+        text: 'text-green-900',
+    },
+    info: {
+        container: 'bg-blue-200 border-blue-600',
+        lightText: 'text-blue-700',
+        text: 'text-blue-900',
+    },
+    default: {
+        container: 'bg-neutral-200 border-neutral-600',
+        lightText: 'text-neutral-700',
+        text: 'text-neutral-900',
+    },
+});
+
+const props = defineProps({
+    type: {
+        required: true,
+        type: String,
+    },
+    step: {
+        required: false,
+        type: Number,
+        default: () => 0,
+    },
+});
+</script>

src/components/Info.vue

@@ -1,40 +1,14 @@
 <template>
-    <div class="text-sm relative">
+    <box :step="step" :type="type">
-        <div
-            class="flex items-center justify-center w-6 h-6 rounded-full border-solid border-2 absolute -top-2 -left-2 font-arvo font-bold"
-            :class="[colors[type].container, colors[type].lightText]"
-            v-text="step"
-        ></div>
-        <div class="flex flex-row items-center p-4 border-2 rounded form-group shadow-sm group" :class="[colors[type].container, type]">
-            <div class="flex-grow text-sm" :class="colors[type].text">
         <slot name="current" v-if="modelValue === step"></slot>
         <slot name="finished" v-if="modelValue > step"></slot>
         <slot name="due" v-if="modelValue < step"></slot>
-            </div>
+    </box>
-        </div>
-    </div>
 </template>
 
 <script setup>
-import {ref, computed} from 'vue';
+import {computed} from 'vue';
-
+import Box from './Box.vue';
-const colors = ref({
-    success: {
-        container: 'bg-green-200 border-green-600',
-        lightText: 'text-green-700',
-        text: 'text-green-900',
-    },
-    info: {
-        container: 'bg-blue-200 border-blue-600',
-        lightText: 'text-blue-700',
-        text: 'text-blue-900',
-    },
-    default: {
-        container: 'bg-neutral-200 border-neutral-600',
-        lightText: 'text-neutral-700',
-        text: 'text-neutral-900',
-    },
-});
 
 const type = computed(() => {
     if (props.modelValue === props.step) {
@@ -52,8 +26,9 @@ const props = defineProps({
         type: Number,
     },
     step: {
-        required: true,
+        required: false,
         type: Number,
+        default: () => 0,
     },
 });
 </script>