teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat: card type icons (#462)

Browse source
This commit is contained in:
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">
import type { Card } from 'masto'
import type { Card, CardType } from 'masto'
const props = defineProps<{
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 gitHubCards = $(computedEager(() => useFeatureFlags().experimentalGitHubCards))
// 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>
<template>
@ -67,7 +74,7 @@ const gitHubCards = $(computedEager(() => useFeatureFlags().experimentalGitHubCa
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>
<StatusPreviewCardInfo :root="root" :card="card" :provider="providerName" />
</NuxtLink>