refactor: integrate tooltip functionality into activity log action button for improved user interaction and clarity

This commit is contained in:
Yoga Pangestu 2026-06-21 01:56:49 +07:00
parent cf7e199306
commit 29f4498ede

View File

@ -1,6 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { Eye } from '@lucide/vue'; import { Eye } from '@lucide/vue';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import Tooltip from '@/components/ui/tooltip/Tooltip.vue';
import TooltipContent from '@/components/ui/tooltip/TooltipContent.vue';
import TooltipTrigger from '@/components/ui/tooltip/TooltipTrigger.vue';
import type { ActivityLogListItem } from '@/types/activity-log'; import type { ActivityLogListItem } from '@/types/activity-log';
defineProps<{ defineProps<{
@ -13,8 +16,13 @@ const emit = defineEmits<{
</script> </script>
<template> <template>
<Button variant="ghost" size="icon-sm" @click="emit('view')"> <Tooltip>
<Eye class="size-4" /> <TooltipTrigger as-child>
<span class="sr-only">Lihat detail</span> <Button variant="ghost" size="icon" class="size-8" @click="emit('view')">
</Button> <Eye class="size-4" />
<span class="sr-only">Lihat</span>
</Button>
</TooltipTrigger>
<TooltipContent>Lihat</TooltipContent>
</Tooltip>
</template> </template>