zio
/
elk
2
0
Fork 0
Code Packages Releases 2 Activity

feat: card type icons (#462)

zio/stable
Ayo Ayco 2022-12-19 16:52:32 +01:00 committed by GitHub
parent cd85871d01
commit e880cd7b63
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/status/StatusPreviewCard.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Card } from 'masto' import type { Card, CardType } from 'masto'
const props = defineProps<{ const props = defineProps<{
card: Card card: Card
@ -22,7 +22,14 @@ const isSquare = $computed(() => (
const providerName = $computed(() => props.card.providerName ? props.card.providerName : new URL(props.card.url).hostname) const providerName = $computed(() => props.card.providerName ? props.card.providerName : new URL(props.card.url).hostname)
const gitHubCards = $(computedEager(() => useFeatureFlags().experimentalGitHubCards)) const gitHubCards = $(computedEager(() => useFeatureFlags().experimentalGitHubCards))
// TODO: handle card.type: 'photo' | 'video' | 'rich'; // TODO: handle card.type: 'photo' | 'video' | 'rich';
const cardTypeIconMap: Record<CardType, string> = {
link: 'i-ri:profile-line',
photo: 'i-ri:image-line',
video: 'i-ri:play-line',
rich: 'i-ri:profile-line',
}
</script> </script>
<template> <template>
@ -67,7 +74,7 @@ const gitHubCards = $(computedEager(() => useFeatureFlags().experimentalGitHubCa
root ? 'rounded-lg' : '', root ? 'rounded-lg' : '',
]" ]"
> >
<div i-ri:profile-line w="30%" h="30%" text-secondary /> <div :class="cardTypeIconMap[card.type]" w="30%" h="30%" text-secondary />
</div> </div>
<StatusPreviewCardInfo :root="root" :card="card" :provider="providerName" /> <StatusPreviewCardInfo :root="root" :card="card" :provider="providerName" />
</NuxtLink> </NuxtLink>