src/components/Card/OverviewCard.astro

@@ -1,5 +1,7 @@
 ---
 import client from "@/data/pocketbase"
+import TagRow from "./TagRow.astro"
+
 const { recipe } = Astro.props;
 
 const headerImage = await client.collection("images").getOne(recipe.images[0])
@@ -12,16 +14,12 @@ const image = await client.files.getURL(headerImage, headerImage.image)
         src={ image }
     />
 
-    <div class="absolute bottom-0 left-0 w-full p-2 h-25 backdrop-filter backdrop-blur-lg rounded-b-xl">
-        <p class="text-[14pt] text-white opacity-90 font-bold" >{recipe.name}</p>
-        <p class="text-white text-[10pt]"> {recipe.description} </p>
+    <div id="bottom-info-panel" class="absolute bottom-0 left-0 w-full p-2 h-25 backdrop-filter backdrop-blur-lg rounded-b-xl">
+        <p id="recipe-name" class="text-[14pt] text-white opacity-90 font-bold" >{recipe.name}</p>
+        <p id="recipe-desc" class="text-white text-[10pt]"> {recipe.description} </p>
 
-        <div class="flex flex-row">
-            {recipe.tags.map(async tag => (
-                <p class="text-white bg-white/20 px-2 mr-2 mt-2 rounded-md">{ 
-                    (await client.collection("tags").getOne(tag)).name
-                }</p>
-            ))}
+        <div id="tag-row" class="">
+            <TagRow tagIds={recipe.tags}/>
         </div>
     </div>
 </div>

src/components/Card/TagRow.astro

@@ -0,0 +1,33 @@
+---
+import client from "../../data/pocketbase"
+
+interface Props {
+    tagIds: string[]
+}
+
+const { tagIds } = Astro.props
+
+const tags = tagIds && tagIds.length > 0 
+    ? await Promise.all(tagIds.map(async (tagId: string) => {
+        try {
+            const tagData = await client.collection("tags").getOne(tagId)
+            return { name: tagData.name, id: tagId }
+        } catch (error) {
+            return null
+        }
+      }))
+    : []
+---
+
+<div class="">
+    {
+        tags.map(tag => (
+            // no hover:bg-white/30 :(
+            <span 
+                class="text-white bg-white/20 px-2 mr-2 mt-2 rounded-md inline-block " 
+            >
+                {tag.name}
+            </span>
+        ))
+    }
+</div>