forked from BRETT/BRETT
55 lines
1.4 KiB
Vue
55 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { toast } from 'vue-sonner'
|
|
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
|
|
|
|
const props = defineProps<{ commentId: number }>()
|
|
|
|
const { toggle } = useCommentReactions()
|
|
const { t } = useI18n()
|
|
|
|
const open = ref(false)
|
|
const busy = ref(false)
|
|
|
|
async function pick(emoji: string) {
|
|
if (busy.value) return
|
|
busy.value = true
|
|
open.value = false
|
|
try {
|
|
await toggle(props.commentId, emoji)
|
|
}
|
|
catch {
|
|
toast.error(t('comments.reactionFailed'))
|
|
}
|
|
finally {
|
|
busy.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Popover v-model:open="open">
|
|
<PopoverTrigger as-child>
|
|
<button
|
|
type="button"
|
|
class="cursor-pointer self-center rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
|
|
:aria-label="$t('comments.addReaction')"
|
|
>
|
|
<Icon name="ph:smiley-fill" class="size-5" />
|
|
</button>
|
|
</PopoverTrigger>
|
|
<PopoverContent align="end" class="w-auto p-2">
|
|
<div class="grid grid-cols-8 gap-1">
|
|
<button
|
|
v-for="e in REACTION_EMOJIS"
|
|
:key="e"
|
|
type="button"
|
|
class="flex size-9 cursor-pointer items-center justify-center rounded-md text-xl transition-colors hover:bg-accent"
|
|
@click="pick(e)"
|
|
>
|
|
{{ e }}
|
|
</button>
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</template>
|