Livewire page component with wire:sort and FluxUI charts

⚡test.blade.php

<?php

use Illuminate\Support\Collection;
use Livewire\Component;

new class extends Component {
    public array $tasks = [
        [
            'id' => 1,
            'title' => "Title 1",
        ],[
            'id' => 2,
            'title' => "Title 2",
        ],[
            'id' => 3,
            'title' => "Title 3",
        ],
    ];

    public function handleSort($id, $position): void
    {
        dump($id, $position);
    }
};
?>

<div>
    <div wire:sort="handleSort">
        @foreach ($tasks as $task)
            <flux:card class="overflow-hidden min-w-[12rem]" wire:key="{{ $task['id'] }}" wire:sort:item="{{ $task['id'] }}">
                <flux:text>Revenue</flux:text>
                <flux:heading size="xl" class="mt-2 tabular-nums">$12,345 {{ $task['title'] }}</flux:heading>
                <flux:chart class="-mx-8 -mb-8 h-[3rem]" :value="[10, 12, 11, 13, 15, 14, 16, 18, 17, 19, 21, 20]">
                    <flux:chart.svg gutter="0">
                        <flux:chart.line class="text-sky-200 dark:text-sky-400" />
                        <flux:chart.area class="text-sky-100 dark:text-sky-400/30" />
                    </flux:chart.svg>
                </flux:chart>
            </flux:card>
        @endforeach
    </div>
</div>