52 lines
1.4 KiB
Vue
52 lines
1.4 KiB
Vue
<template>
|
|
<button
|
|
class="flex-1 flex flex-col items-center py-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()">
|
|
<img
|
|
draggable="false"
|
|
:src="icon" alt="connection-type-icon"
|
|
class="w-16 py-2"
|
|
:class="{'invert': invert && selected}">
|
|
<ScrambleText ref="title" :resize="false" class="text-xs text-wrap p-1" :text="title" />
|
|
<span>
|
|
<ArrowBigUp class="inline-block" />
|
|
<Badge
|
|
class="shadow-none text-wrap inline-block p-0.5 mx-1"
|
|
:class="{'bg-orange-400': selected, 'bg-zinc-400': !selected}">Space</Badge>+<Badge
|
|
class="shadow-none text-wrap inline-block p-0.5 mx-1"
|
|
:class="{'bg-orange-400': selected, 'bg-zinc-400': !selected}">E</Badge>
|
|
</span>
|
|
</button>
|
|
</template>
|
|
<script setup>
|
|
import ScrambleText from '@/components/effects/ScrambleText.vue'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { ArrowBigUp } from 'lucide-vue-next'
|
|
|
|
defineEmits(['select'])
|
|
|
|
defineProps({
|
|
title: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
icon: {
|
|
type: [String, Object, Function],
|
|
default: '',
|
|
},
|
|
selected: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
invert: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
badge: {
|
|
type: [String, Object, Function],
|
|
default: '',
|
|
},
|
|
})
|
|
</script> |