elk/components/status/StatusActions.vue

36 lines
1.2 KiB
Vue
Raw Normal View History

2022-11-13 05:34:43 +00:00
<script setup lang="ts">
2022-11-14 02:20:07 +00:00
import type { Status } from 'masto'
2022-11-13 05:34:43 +00:00
2022-11-14 02:20:07 +00:00
defineProps<{
status: Status
2022-11-13 05:34:43 +00:00
}>()
</script>
<template>
2022-11-14 02:56:48 +00:00
<div flex gap-8>
<button flex gap-1 items-center w-full rounded op75 hover="op100 text-blue" group>
<div rounded-full p2 group-hover="bg-blue/10">
<div i-ri:chat-3-line />
</div>
<span v-if="status.repliesCount">{{ status.repliesCount }}</span>
2022-11-13 05:34:43 +00:00
</button>
2022-11-14 02:56:48 +00:00
<button flex gap-1 items-center w-full rounded op75 hover="op100 text-green" group>
<div rounded-full p2 group-hover="bg-green/10">
<div i-ri:repeat-fill />
</div>
<span v-if="status.reblogsCount">{{ status.reblogsCount }}</span>
2022-11-13 05:34:43 +00:00
</button>
2022-11-14 02:56:48 +00:00
<button flex gap-1 items-center w-full rounded op75 hover="op100 text-rose" group>
<div rounded-full p2 group-hover="bg-rose/10">
<div i-ri:heart-3-line />
</div>
<span v-if="status.favouritesCount">{{ status.favouritesCount }}</span>
2022-11-13 05:34:43 +00:00
</button>
2022-11-14 02:56:48 +00:00
<button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group>
<div rounded-full p2 group-hover="bg-purple/10">
<div i-ri:share-circle-line />
</div>
2022-11-13 16:05:32 +00:00
</button>
2022-11-13 05:34:43 +00:00
</div>
</template>