Multi-Step component

[jechazelle]

I would like to start a discussion about implementing multi-step component.

We could use the component like this:

<flux:steps>
    <flux:step icon="check" label="General">
        <livewire.step_form1 />
    </flux:step>

    <flux:step icon="check" label="Location">
        <livewire.step_form2 />
    </flux:step>

    <flux:step icon="check" label="Additional">
        <livewire.step_form3 />
    </flux:step>

    <flux:step icon="check" label="Advanced">
        <livewire.step_form4 />
    </flux:step>
</flux:steps>

On front:

[mauritskorse]

Could this be some tab variant?

    <flux:tab.group>
        <flux:tabs class="items-center w-96 !border-b-0">
            <flux:tab name="profile" icon="check">Profile</flux:tab>
            <flux:separator />
            <flux:tab name="account" icon="check">Account</flux:tab>
            <flux:separator />
            <flux:tab name="billing" icon="check">Billing</flux:tab>
        </flux:tabs>
    
        <flux:tab.panel name="profile">...</flux:tab.panel>
        <flux:tab.panel name="account">...</flux:tab.panel>
        <flux:tab.panel name="billing">...</flux:tab.panel>
    </flux:tab.group>