Skip to content
Snippets Groups Projects
Card.vue 1.36 KiB
Newer Older
  • Learn to ignore specific revisions
  • Kasper Seweryn's avatar
    Kasper Seweryn committed
    <script setup lang="ts">
    import { type PastelProps, usePastel } from '~/composables/usePastels'
    
    Kasper Seweryn's avatar
    Kasper Seweryn committed
    import { FwCard, FwPlayButton } from '~/components'
    
    Kasper Seweryn's avatar
    Kasper Seweryn committed
    import { useRouter } from 'vue-router'
    
    Kasper Seweryn's avatar
    Kasper Seweryn committed
    import { useI18n } from 'vue-i18n'
    
    const { t } = useI18n()
    
    interface Radio {
    
    Kasper Seweryn's avatar
    Kasper Seweryn committed
      id: number
    
    Kasper Seweryn's avatar
    Kasper Seweryn committed
      name: string
      description: string
    }
    
    
    Kasper Seweryn's avatar
    Kasper Seweryn committed
    interface Events {
      (e: 'play', radio: Radio): void
    }
    
    
    Kasper Seweryn's avatar
    Kasper Seweryn committed
    interface Props extends PastelProps {
      radio: Radio
      small?: boolean
    
      // TODO (wvffle): Remove after https://github.com/vuejs/core/pull/4512 is merged
      red?: boolean
      blue?: boolean
      purple?: boolean
      green?: boolean
      yellow?: boolean
    }
    
    
    Kasper Seweryn's avatar
    Kasper Seweryn committed
    const emit = defineEmits<Events>()
    
    Kasper Seweryn's avatar
    Kasper Seweryn committed
    const props = defineProps<Props>()
    
    const pastel = usePastel(props)
    
    Kasper Seweryn's avatar
    Kasper Seweryn committed
    
    let navigate = () => {}
    
    if (import.meta.env.PROD) {
      const router = useRouter()
      navigate = () => router.push({ name: 'library.radios.detail', params: { id: props.radio.id } })
    }
    
    Kasper Seweryn's avatar
    Kasper Seweryn committed
    </script>
    
    <template>
      <fw-card
        :title="radio.name"
        :class="pastel"
    
    Kasper Seweryn's avatar
    Kasper Seweryn committed
        @click="navigate"
    
    Kasper Seweryn's avatar
    Kasper Seweryn committed
        class="radio-card"
      >
        <div class="radio-cover">
    
    Kasper Seweryn's avatar
    Kasper Seweryn committed
          <div class="cover-name">
            {{ t('vui.radio') }}
    
    Kasper Seweryn's avatar
    Kasper Seweryn committed
            <fw-play-button @play="emit('play', props.radio)" />
    
    Kasper Seweryn's avatar
    Kasper Seweryn committed
          </div>
    
    Kasper Seweryn's avatar
    Kasper Seweryn committed
        </div>
        <div
          v-if="!small"
          class="radio-description"
        >
          {{ radio.description }}
        </div>
      </fw-card>
    </template>
    
    <style lang="scss">
    @import './style.scss'
    </style>