Suggestion: Stacked lists

[kylewallace]

Suggestion to implement a common 'stacked list' feature seen in Tailwind UI and Bootstrap.

I've prepared a basic example of how the list could work using a couple of components:

stack.blade.php

@props(['variant' => 'card'])

@php
$classes = Flux::classes()
    ->add('divide-y divide-zinc-200 dark:divide-white/10')
    ->add(match ($variant) {
        'card' => 'rounded-xl [&_:first-child]:rounded-t-xl [&_:last-child]:rounded-b-xl'
    })
    ->add(match ($variant) {
        'card' => 'bg-white dark:bg-white/10'
    })
    ->add(match ($variant) {
        'card' => 'border border-zinc-200 dark:border-white/10'
    })
@endphp

<div {{ $attributes->class($classes) }} data-flux-stack>
    {{ $slot }}
</div>

stack-item.blade.php

@php
$classes = Flux::classes()
    ->add('p-6')
@endphp

<div {{ $attributes->class($classes) }} data-flux-stack-item>
    {{ $slot }}
</div>

Rendered accordingly:

view.blade.php

<x-stack>
    @for($i = 0; $i < 3; $i++)
    <x-stack-item>
        <div class="flex items-center justify-between">
            <div>
                Stack
            </div>
            <div>
                Item
            </div>
        </div>
    </x-stack-item>
    @endfor
</x-stack>