tethys.backend/resources/js/Components/Icons/Wizard.vue

<template>
    <div class="flex items-center relative">
        <!-- The main circular icon with dynamic classes based on the state of the step -->
        <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',
             ]">
            <!-- Slot for custom content inside the circle -->
            <slot></slot>
            <!-- Label displayed above the icon, visibility controlled by isCurrent and isDark -->
            <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase invisible sm:visible"
                 :class="[!isDark && isCurrent ? 'font-black text-green-600' : '']">
                {{ label }}
            </div>
        </div>
    </div>
    <!-- Divider line between steps, only visible if this is not the last step -->
    <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 lang="ts">
import { StyleService } from '@/Stores/style.service';

const styleService = StyleService();

export default {
    name: 'Icon_Multistep',
    props: {
        isCurrent: Boolean,   // Indicates if this step is the current one
        isChecked: Boolean,   // Indicates if this step has been checked
        isLastStep: Boolean,  // Indicates if this step is the last one
        label: String,        // Label to display above the icon
    },
    data() {
        return {
            mode: 'light',                     // Light mode setting
            checkedClass: 'border-teal-600',   // Class for checked state
            uncheckedClass: 'border-gray-300',  // Class for unchecked state
        };
    },
    computed: {
        // Computed property to determine if dark mode is enabled
        isDark() {
            return styleService.darkMode === true; // Return true if dark mode is active
        }
    },
};
</script>