How to do multiple repeat sections in Laravel / Blade?

OK, I'm designing a tab view component. It has a variable number of tabs depending on where / how it is used. What I would like to do is this (simplified):

@component('tabSet')
   @component('tab', ['label' => 'settings', 'content' => 'nameOfContentComponent'])
   @component('tab', ['label' => 'stuff', 'content' => 'nameOfContentComponent'])
   @component('tab', ['label' => 'Other stuff', 'content' => 'nameOfContentComponent'])
  @component('tab', ['label' => 'And even more stuff', 'content' => 'nameOfContentComponent'])
@endcomponent

The desired output would look some thing like this:

<section class="tabSet">
        <div class="tabs-contentArea"> 
<!-- this section is repeated for each tab-->
            <div class="tabs-contentArea-content">nameOfContentComponent</div>
 <!-- this section is repeated for each tab-->      
            <div class="tabs-contentArea-content">nameOfContentComponent</div>
  <!-- this section is repeated for each tab-->        
            <div class="tabs-contentArea-content">nameOfContentComponent</div>
  <!-- this section is repeated for each tab-->         
            <div class="tabs-contentArea-content">nameOfContentComponent</div>
<!-- this section is repeated for each tab-->

        </div>
        <div class="tabs-tabArea">
<!-- this section is repeated for each tab-->
            <div class="tabs-tab"> 
                <label class="tabs-tab-label icon-skull" >settings</label>
            </div>
<!-- this section is repeated for each tab-->
            <div class="tabs-tab">
                <label class="tabs-tab-label-mobile icon-skull" >Stuff</label>
            </div>
<!-- this section is repeated for each tab-->
            <div class="tabs-tab">
                <label class="tabs-tab-label-mobile icon-skull">Other stuff</label>
            </div>
<!-- this section is repeated for each tab-->
            <div class="tabs-tab">
                <label class="tabs-tab-label-mobile icon-skull"  >And even more stuff</label>
            </div>
<!-- this section is repeated for each tab-->
        </div>
    </div>
</section>

I can't see how I could separate the variables into two different repeating sections with a variable number of tabs (.tabs-contentArea-content and .tabs-tab-label)

I could go for a version where I load an array of the relevant variables and use two for-loops to generate the sections, but that would require that I do something like

@component('tabSet', ['tabData' => 'fileWithArray'])@endcomponent

and load the data from the array as variables - this seems at lot less clean, since an array file would have to be made for each tab set, rather than just specifying which tabs to create as the view is being built.

Please advice on best practice in this matter

Best regards

David Trappaud

Solution

Keep it simple. Components does not provide functionality you want. I suggest to use:

@component('tabSet', ['tabs' => [
        'settings' => 'nameOfSettingsContentComponent',
        'stuff' => 'nameOfStuffContentComponent',
    ]])
@endcomponent

and in the tabSet use foreach twice

@foreach($tabs as $label => $componentName)
@endforeach