fix issue with placeholder image in darkmode

Signed-off-by: Benny Samir Hierl <bennysamir@posteo.de>

prisma/seed.ts

@@ -19,6 +19,13 @@ const wishlistData: Prisma.WishlistCreateInput[] = [
           description:
             'Cute goldfish and fry, build-and-display BrickHeadz™ model',
         },
+        {
+          title: 'Goldfish 40442 | BrickHeadz',
+          url: 'https://www.lego.com/en-de/product/goldfish-40442',
+          imageSrc: '',
+          description:
+            'Cute goldfish and fry, build-and-display BrickHeadz™ model',
+        },
       ],
     },
   },

src/components/ImagePreview.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import IconImagePlaceholder from './icons/IconImagePlaceholder.vue'
+
+defineProps({
+  src: {
+    type: String,
+    default: '',
+  },
+  alt: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <img v-if="src" :src="src" :alt="alt" class="object-cover" />
+  <div v-else class="flex items-center justify-center bg-stone-100">
+    <IconImagePlaceholder class="h-36 w-36 fill-stone-300" />
+  </div>
+</template>

src/components/WishlistItem.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
 import IconLink from './icons/IconLink.vue'
-import IconImagePlaceholder from './icons/IconImagePlaceholder.vue'
+import ImagePreview from './ImagePreview.vue'
 import BaseButton from './BaseButton.vue'
 import IconCart from './icons/IconCart.vue'
 defineProps<{
@@ -17,18 +17,11 @@ const { t } = useI18n()
   <div
     class="flex h-fit flex-col space-x-0 overflow-hidden rounded-md border-2 border-stone-200 dark:border-stone-700 sm:h-40 sm:flex-row sm:space-x-2"
   >
-    <img
+    <ImagePreview
-      v-if="image"
+      class="max-h-44 flex-shrink-0 flex-grow-0 object-cover sm:aspect-[3/2]"
       :src="image"
       :alt="title"
-      class="max-h-44 flex-shrink-0 flex-grow-0 object-cover sm:aspect-[3/2]"
     />
-    <div
-      v-else
-      class="flex max-h-44 flex-shrink-0 flex-grow-0 items-center justify-center bg-stone-100 sm:aspect-[3/2]"
-    >
-      <IconImagePlaceholder class="h-36 w-36 opacity-20" />
-    </div>
 
     <div class="flex flex-col justify-between p-2">
       <div>

src/components/icons/IconImagePlaceholder.vue

@@ -1,7 +1,6 @@
 <template>
-  <svg viewBox="0 0 24 24">
+  <svg viewBox="0 0 24 24" v-bind="$attrs">
     <path
-      fill="currentColor"
       d="M14,6L10.25,11L13.1,14.8L11.5,16C9.81,13.75 7,10 7,10L1,18H23L14,6Z"
     />
   </svg>

src/views/DetailView.vue

@@ -4,7 +4,7 @@ import { WishlistItem as WishlistItemType } from '@/types'
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { useWishlistStore, useModal } from '@/composables'
-import Tile from '@/components/Tile.vue'
+import ImageTile from '@/components/ImageTile.vue'
 import WishlistItem from '@/components/WishlistItem.vue'
 import { IconNoGift } from '../components/icons'
 
@@ -40,7 +40,7 @@ const bought = async (item: WishlistItemType): Promise<void> => {
     <div
       class="flex flex-col items-center space-x-0 space-y-2 md:flex-row md:space-x-6 md:space-y-0"
     >
-      <Tile :image-src="state.imageSrc" class="shrink-0"></Tile>
+      <ImageTile :image-src="state.imageSrc" class="shrink-0"></ImageTile>
       <div>
         <h1 class="mb-2 text-center text-2xl font-bold md:text-left">
           {{ state.title }}

src/views/HomeView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import Tile from '@/components/Tile.vue'
+import ImageTile from '@/components/ImageTile.vue'
 import { useWishlistsStore } from '@/composables'
 
 const { t } = useI18n()
@@ -18,7 +18,7 @@ await fetch()
       :key="index"
       :to="'/' + item.slugUrlText"
     >
-      <Tile :title="item.title" :image-src="item.imageSrc" class="m-4" />
+      <ImageTile :title="item.title" :image-src="item.imageSrc" class="m-4" />
     </router-link>
   </div>
 </template>