<template>
  <div class="channel-list">
    <ul class="channel-list__list">
      <Channel v-for="channel in channels" :key="channel.id" :channel="channel" />
    </ul>
  </div>
</template>

<script setup lang="ts">
import { qChannelList } from '../api/qChannelList.ts'
import Channel from './Channel.vue'

const { data: channels } = qChannelList()
</script>

<style lang="scss">
.channel-list {
  > *:not(:last-child) {
    margin-bottom: var(--space-6);
  }
}
</style>
