Example of Livewire/livewire in christophrumpel/larastreamers

File app/Http/Livewire/StreamList.php (link to Github)
use Illuminate\Contracts\View\View;
use Livewire\Component;

class StreamList extends Component
{
    public $streamsByDate;

    public $isArchive = false;

    public function render(): View
    {
        return view('livewire.stream-list');
    }
}
File resources/views/livewire/stream-list.blade.php (link to Github)
<div class="py-16 space-y-16">
    @foreach ($streamsByDate as $date => $streams)
        <section class="space-y-2">
            <header
                class="sticky top-0 z-20 py-4 bg-gray-700 bg-opacity-90 backdrop-filter backdrop-blur-lg backdrop-saturate-150">
                <div class="w-full max-w-6xl px-4 mx-auto sm:px-6 md:px-8">
                    <h2 class="text-3xl font-bold tracking-tight text-red-400 md:text-4xl">
                        {{ $date }}
                    </h2>
                </div>
            </header>

            <div class="w-full max-w-6xl px-4 mx-auto sm:px-6 md:px-8">
                <ul class="grid gap-4 md:grid-cols-2 lg:grid-cols-1">
                    @foreach ($streams as $stream)
                        @include('pages.partials.stream')
                    @endforeach
                </ul>
            </div>
        </section>
    @endforeach
</div>
File resources/views/pages/archive.blade.php (link to Github)
<x-main-layout :show-calendar-downloads="false" title="Larastreamers Archive" description="Did you miss a stream? Don't worry. Just scroll through the archive and watch it now.">
    <h2 class="mt-12 text-4xl text-center">Archive</h2>
    <livewire:stream-list :streams-by-date="$pastStreamsByDate" :is-archive="true" />
</x-main-layout>

Additional resources on livewire/livewire: