From eba166a2f173ce349202007594dd3d97015fe0a5 Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Tue, 11 Jun 2024 08:32:39 -0500
Subject: [PATCH] fix(web): cannot click on explore place (#10121)

---
 .../lib/components/assets/thumbnail/thumbnail.svelte  |  3 ++-
 web/src/routes/(user)/explore/+page.svelte            | 11 ++++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/web/src/lib/components/assets/thumbnail/thumbnail.svelte b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
index 5c86801160..f61e54072d 100644
--- a/web/src/lib/components/assets/thumbnail/thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
@@ -43,6 +43,7 @@
   export let readonly = false;
   export let showArchiveIcon = false;
   export let showStackedIcon = true;
+  export let href: string | undefined = undefined;
   export let onClick: ((asset: AssetResponseDto) => void) | undefined = undefined;
 
   let className = '';
@@ -99,7 +100,7 @@
 
 <IntersectionObserver once={false} on:intersected let:intersecting>
   <a
-    href={currentUrlReplaceAssetId(asset.id)}
+    href={href ?? currentUrlReplaceAssetId(asset.id)}
     style:width="{width}px"
     style:height="{height}px"
     class="group focus-visible:outline-none flex overflow-hidden {disabled
diff --git a/web/src/routes/(user)/explore/+page.svelte b/web/src/routes/(user)/explore/+page.svelte
index 015c89733c..509b7ec51f 100644
--- a/web/src/routes/(user)/explore/+page.svelte
+++ b/web/src/routes/(user)/explore/+page.svelte
@@ -86,18 +86,23 @@
       </div>
       <div class="flex flex-row flex-wrap gap-4">
         {#each places as item (item.data.id)}
-          <a class="relative" href="{AppRoute.SEARCH}?{getMetadataSearchQuery({ city: item.value })}" draggable="false">
+          <div class="relative">
             <div
               class="flex w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] justify-center overflow-hidden rounded-xl brightness-75 filter"
             >
-              <Thumbnail thumbnailSize={156} asset={item.data} readonly />
+              <Thumbnail
+                thumbnailSize={156}
+                asset={item.data}
+                readonly
+                href="{AppRoute.SEARCH}?{getMetadataSearchQuery({ city: item.value })}"
+              />
             </div>
             <span
               class="w-100 absolute bottom-2 w-full text-ellipsis px-1 text-center text-sm font-medium capitalize text-white backdrop-blur-[1px] hover:cursor-pointer"
             >
               {item.value}
             </span>
-          </a>
+          </div>
         {/each}
       </div>
     </div>