38 lines
971 B
Vue
38 lines
971 B
Vue
<template>
|
|
<button
|
|
class="flex-1 flex flex-col items-center rounded-xl p-2 gap-2 font-heading transition-all"
|
|
:class="{'text-black bg-zinc-300 hover:bg-zinc-200': selected,
|
|
'hover:bg-zinc-800 text-muted-foreground' : !selected}"
|
|
@click="$emit('select'); $refs.title.scramble()">
|
|
<slot v-if="$slots['replace']" name="replace" />
|
|
<template v-else>
|
|
<img
|
|
v-if="icon"
|
|
draggable="false"
|
|
:src="icon" :alt="title"
|
|
class="h-16"
|
|
:class="{'invert': selected}">
|
|
<ScrambleText ref="title" :resize="false" class="text-xs text-wrap" :text="title" />
|
|
</template>
|
|
</button>
|
|
</template>
|
|
<script setup>
|
|
import ScrambleText from '@/components/common/ScrambleText.vue'
|
|
|
|
defineEmits(['select'])
|
|
|
|
defineProps({
|
|
title: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
icon: {
|
|
type: [String, Object, Function],
|
|
default: null,
|
|
},
|
|
selected: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
})
|
|
</script> |