32 lines
806 B
Vue
32 lines
806 B
Vue
<template>
|
||
<div class="w-20 flex flex-col items-center py-4">
|
||
<div class="flex-1 space-y-4">
|
||
<div
|
||
v-for="tag in tags"
|
||
:key="tag"
|
||
:class="[
|
||
'w-12 h-12 rounded-full flex items-center justify-center',
|
||
tag === selectedTag ? 'bg-blue-500' : 'bg-gray-700 hover:bg-gray-600'
|
||
]"
|
||
tabindex="-1"
|
||
@click="$emit('selectTag', tag)"
|
||
>
|
||
{{ tag }}
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
class="mt-auto w-12 h-12 bg-gray-600 hover:bg-gray-500 rounded-full flex items-center justify-center"
|
||
tabindex="-1"
|
||
@click="$emit('openOptions')"
|
||
>
|
||
⚙️
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
defineProps(['tags', 'selectedTag']);
|
||
defineEmits(['selectTag', 'openOptions']);
|
||
</script>
|