feat: card type icons (#462)

elk-zone · Dec 19, 2022 · e880cd7 · e880cd7
1 parent cd85871
commit e880cd7
Showing 1 changed file with 9 additions and 2 deletions.
diff --git a/components/status/StatusPreviewCard.vue b/components/status/StatusPreviewCard.vue
@@ -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>