Newer
Older
<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"
:class="{ 'has-image': !!image || $slots.image, 'is-link': !!onClick, 'is-category': category, 'is-cta': !!buttonTitle }"
<div
v-if="$slots.image"
class="card-image"
>
<slot name="image" :src="image" />
</div>
<div class="card-title">{{ title }}</div>
<div
v-if="$slots.default"
class="card-content"
>
<slot />
</div>
<div
v-if="buttonTitle"
class="card-button"
>
<fw-button class="is-dark" outline secondary @click="onClick">{{ buttonTitle }}</fw-button>