From e880cd7b63395899ab07cd830bf1eb1fa11e3adc Mon Sep 17 00:00:00 2001
From: Ayo Ayco <ramon.aycojr@gmail.com>
Date: Mon, 19 Dec 2022 16:52:32 +0100
Subject: [PATCH] feat: card type icons (#462)

---
 components/status/StatusPreviewCard.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/components/status/StatusPreviewCard.vue b/components/status/StatusPreviewCard.vue
index 815ad5e8b..58f4ba8d6 100644
--- 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>