- second commit

resources/js/Components/Icons/Wizard.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class="flex items-center relative">
+        <!-- v-bind:class="{ 'text-white  bg-teal-600 border-teal-600': isCurrent, 'border-teal-600': isChecked }" -->
+        <div
+            class="text-gray-500 rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2"
+            :class="[
+                isCurrent ? 'text-white  bg-teal-600 border-teal-600' : 'border-gray-300',
+                isChecked && 'text-teal-600 border-teal-600',
+            ]"
+        >
+            <!-- <svg class="my-svg-component" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M11.42 15.17L17.25 21A2.652 2.652 0 0021 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 11-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 004.486-6.336l-3.276 3.277a3.004 3.004 0 01-2.25-2.25l3.276-3.276a4.5 4.5 0 00-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437l1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008z"
+                />
+            </svg> -->
+            <slot></slot>
+            <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase invisible sm:visible">
+                {{ label }}
+            </div>
+        </div>
+    </div>
+    <div v-if="!isLastStep"
+        class="flex-auto border-t-2 transition duration-500 ease-in-out invisible sm:visible"
+        :class="[isChecked ? 'border-teal-600' : 'border-gray-300']"
+    ></div>
+</template>
+
+<script>
+export default {
+    name: 'Icon_Multistep',
+
+    props: {
+        isCurrent: Boolean,
+        isChecked: Boolean,
+        isLastStep: Boolean,
+        label: String,
+    },
+
+    data() {
+        return {
+            mode: 'light',
+            checkedClass: 'border-teal-600',
+            uncheckedClass: 'border-gray-300',
+        };
+    },
+};
+</script>