Skip to content
Snippets Groups Projects
Card.vue 1.04 KiB
Newer Older
  • Learn to ignore specific revisions
  • Kasper Seweryn's avatar
    Kasper Seweryn committed
    <script setup lang="ts">
    import { FwButton } from '~/components'
    
    interface Props {
      title: string
      buttonTitle?: string
      image?: string
      onClick?: (event: Event) => void
      category?: boolean
    }
    
    defineProps<Props>()
    </script>
    
    <template>
    	<div
        @click="(event) => !buttonTitle ? onClick?.(event) : undefined"
        class="funkwhale card"
    
    Kasper Seweryn's avatar
    Kasper Seweryn committed
        :class="{ 'has-image': !!image || $slots.image, 'is-link': !!onClick, 'is-category': category, 'is-cta': !!buttonTitle }"
    
    Kasper Seweryn's avatar
    Kasper Seweryn committed
      >
    
    Kasper Seweryn's avatar
    Kasper Seweryn committed
        <div
          v-if="$slots.image"
          class="card-image"
        >
          <slot name="image" :src="image" />
        </div>
    
    
    Kasper Seweryn's avatar
    Kasper Seweryn committed
        <img
    
    Kasper Seweryn's avatar
    Kasper Seweryn committed
          v-else-if="image"
    
    Kasper Seweryn's avatar
    Kasper Seweryn committed
          :src="image"
          class="card-image"
        />
    
    Kasper Seweryn's avatar
    Kasper Seweryn committed
    
    
    Kasper Seweryn's avatar
    Kasper Seweryn committed
        <div class="card-title">{{ title }}</div>
        <div
          v-if="$slots.default"
          class="card-content"
        >
          <slot />
        </div>
        <div
          v-if="buttonTitle"
          class="card-button"
        >
    
    Kasper Seweryn's avatar
    Kasper Seweryn committed
          <fw-button class="is-dark" outline secondary @click="onClick">{{ buttonTitle }}</fw-button>
    
    Kasper Seweryn's avatar
    Kasper Seweryn committed
        </div>
      </div>
    </template>
    
    <style lang="scss">
    @import './style.scss'
    </style>