Spatie Livewire Wizard blade Component

gistfile1.txt

{{-- Use as A blade omponent in all Steps Views--}}
{{--    <div>--}}
{{--        <x-wizard-view-component :steps="$steps" >--}}

{{--            Welcome  Slotted--}}

{{--        </x-wizard-view-component>--}}
{{--    </div>--}}
{{--    That Should do it all --}}
<div>
    <nav aria-label="Progress">
        <ol role="list" class="border border-gray-300 rounded-md divide-y divide-gray-300 md:flex md:divide-y-0 ">
            @foreach($steps as $key=>$stepView)
                <div>
                    <li class="relative md:flex-1 md:flex">
                        <!-- Completed Step -->
                        <a href="#" class="group flex items-center w-full" wire:click="showStep('{{$stepView->component}}')">
                            <span class="px-6 py-4 flex items-center text-sm font-medium">
                            @if($stepView->isCurrent() )
                                    <x-wizard.current :state="$stepView->state"/>
                                    <span
                                        class="ml-4 text-md font-medium text-gray-100 px-5">{{ $stepView->label }}</span>

                                @else
                                    <x-wizard.non-current :state="$stepView->state"/>
                                    <span class="ml-4 text-md  text-gray-500 px-5">{{ $stepView->label }}</span>

                                @endif
                            </span>
                        </a>
                    </li>
                </div>
           @endforeach
        </ol>
    </nav>
    <div class="text-xl text-center pt-5 ">
        {{$slot}}
    </div>

    <div class="border border-gray-300 rounded-md flex justify-between p-5 mt-5 ">

        <div class="px-5">


            @if(in_array('previous',collect($steps)->pluck('status')->toArray()))
                <x-form.button class="text-lg text-white hover:text-gray-200" wire:click="previousStep">

                    Previous
                </x-form.button>
            @endif
        </div>
        <div class="px-5">
            @if(in_array('next',collect($steps)->pluck('status')->toArray()))
                <x-form.button class="text-lg text-white hover:text-gray-200" wire:click="nextStep">
                    Next
                </x-form.button>
            @endif

        </div>
    </div>

</div>