Toggle Switch

<div class="flex items-center gap-4">

    <button wire:click="toggle" class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent
                   transition-colors duration-200 ease-in-out focus:outline-none
                   {{ $enabled ? 'bg-violet-500' : 'bg-zinc-700' }}">
        <span class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow
                     transition duration-200 ease-in-out
                     {{ $enabled ? 'translate-x-5' : 'translate-x-0' }}">
        </span>
    </button>

    <span class="font-mono text-sm {{ $enabled ? 'text-violet-400' : 'text-zinc-500' }}">
        {{ $enabled ? 'Activé' : 'Désactivé' }}
    </span>

</div>

<?php

namespace App\Livewire\Playground\Components;

use Livewire\Component;

class ToggleSwitch extends Component
{
    public bool $enabled = false;

    public function toggle(): void
    {
        $this->enabled = !$this->enabled;
    }

    public function render()
    {
        return view('livewire.playground.components.toggle-switch');
    }
}