From 618c501221b91ed10fb66f5fbea31f2d8c8e2a8f Mon Sep 17 00:00:00 2001
From: Benny Samir Hierl <bennysamir@posteo.de>
Date: Sat, 12 Feb 2022 21:43:57 +0100
Subject: [PATCH] fix issue with placeholder image in darkmode

Signed-off-by: Benny Samir Hierl <bennysamir@posteo.de>
---
 prisma/seed.ts                                |  7 +++++++
 src/components/ImagePreview.vue               | 21 +++++++++++++++++++
 src/components/{Tile.vue => ImageTile.vue}    |  0
 src/components/WishlistItem.vue               | 13 +++---------
 src/components/icons/IconImagePlaceholder.vue |  3 +--
 src/views/DetailView.vue                      |  4 ++--
 src/views/HomeView.vue                        |  4 ++--
 7 files changed, 36 insertions(+), 16 deletions(-)
 create mode 100644 src/components/ImagePreview.vue
 rename src/components/{Tile.vue => ImageTile.vue} (100%)

diff --git a/prisma/seed.ts b/prisma/seed.ts
index b03b616..17b66a2 100644
--- a/prisma/seed.ts
+++ b/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',
+        },
       ],
     },
   },
diff --git a/src/components/ImagePreview.vue b/src/components/ImagePreview.vue
new file mode 100644
index 0000000..b51e2e3
--- /dev/null
+++ b/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>
diff --git a/src/components/Tile.vue b/src/components/ImageTile.vue
similarity index 100%
rename from src/components/Tile.vue
rename to src/components/ImageTile.vue
diff --git a/src/components/WishlistItem.vue b/src/components/WishlistItem.vue
index c9f497f..08e5d12 100644
--- a/src/components/WishlistItem.vue
+++ b/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
-      v-if="image"
+    <ImagePreview
+      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>
diff --git a/src/components/icons/IconImagePlaceholder.vue b/src/components/icons/IconImagePlaceholder.vue
index 6aac537..8b433c2 100644
--- a/src/components/icons/IconImagePlaceholder.vue
+++ b/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>
diff --git a/src/views/DetailView.vue b/src/views/DetailView.vue
index 78e270c..0b4945b 100644
--- a/src/views/DetailView.vue
+++ b/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 }}
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 547c181..e2cdde1 100644
--- a/src/views/HomeView.vue
+++ b/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>