refactor: integrate tooltip functionality into activity log action button for improved user interaction and clarity
This commit is contained in:
parent
cf7e199306
commit
29f4498ede
@ -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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user