<script>
    import { activeChannel } from '../store';

    export let id;
    export let name;
    let active = false;

    activeChannel.subscribe((value) => {
        active = value ? value.id == id : false;
    });

    function activate() {
        activeChannel.update(() => ({ id, name }));
    }
</script>

<li
    class="cursor-pointer hover:bg-teal-100"
    class:bg-teal-300={active}
    on:click={activate}
>
    #{name}
</li>
