elk/components/search/SearchHashtagInfo.vue

32 lines
1,007 B
Vue
Raw Normal View History

2022-12-17 21:35:07 +00:00
<script setup lang="ts">
2023-01-08 06:21:09 +00:00
import type { mastodon } from 'masto'
2023-01-07 14:21:48 +00:00
const { hashtag } = defineProps<{
2023-01-08 06:21:09 +00:00
hashtag: mastodon.v1.Tag
2023-01-07 14:21:48 +00:00
}>()
const totalTrend = $computed(() =>
hashtag.history?.reduce((total: number, item) => total + (Number(item.accounts) || 0), 0),
)
2022-12-17 21:35:07 +00:00
</script>
<template>
2023-01-05 22:50:14 +00:00
<div flex flex-row items-center gap2 relative>
<div w-10 h-10 flex-none rounded-full bg-active flex place-items-center place-content-center>
2022-12-17 21:35:07 +00:00
<div i-ri:hashtag text-secondary text-lg />
</div>
<div flex flex-col>
<span>
{{ hashtag.name }}
</span>
2023-01-24 18:52:48 +00:00
<CommonTrending v-if="hashtag.history" :history="hashtag.history" text-xs text-secondary truncate />
</div>
2023-01-24 18:52:48 +00:00
<div v-if="totalTrend && hashtag.history" absolute left-15 right-0 top-0 bottom-4 op35 flex place-items-center place-content-center ml-auto>
2023-01-07 14:52:58 +00:00
<CommonTrendingCharts
:history="hashtag.history" :width="150" :height="20"
text-xs text-secondary h-full w-full
/>
2022-12-17 21:35:07 +00:00
</div>
</div>
</template>