37 lines
942 B
Vue
37 lines
942 B
Vue
<template>
|
|
<button
|
|
class="flex-1 flex flex-col items-center rounded-xl my-1 mx-0.5 p-1 gap-2"
|
|
:class="{'text-black bg-zinc-200 hover:bg-zinc-100': 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
|
|
draggable="false"
|
|
:src="icon" alt="connection-type-icon"
|
|
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/effects/ScrambleText.vue'
|
|
|
|
defineEmits(['select'])
|
|
|
|
defineProps({
|
|
title: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
icon: {
|
|
type: [String, Object, Function],
|
|
default: '',
|
|
},
|
|
selected: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
})
|
|
</script> |