From c9e4a0b00413ade52c69410528ef85eceb18537c Mon Sep 17 00:00:00 2001
From: Mackie <iwan.mackie@gmail.com>
Date: Wed, 3 Jun 2026 12:35:20 +0800
Subject: [PATCH] try

---
 src/blocks/Showcase/Component.tsx | 142 +++++++++++-------------------
 1 file changed, 53 insertions(+), 89 deletions(-)

diff --git a/src/blocks/Showcase/Component.tsx b/src/blocks/Showcase/Component.tsx
index 18ba07f..21c8709 100644
--- a/src/blocks/Showcase/Component.tsx
+++ b/src/blocks/Showcase/Component.tsx
@@ -23,7 +23,48 @@ type ShowcaseBlockProps = {
   items?: ShowcaseItem[]
 }
 
-const COMING_SOON_BG = 'bg-muted/50'
+function ShowcaseImage({ item }: { item: ShowcaseItem }) {
+  const imageUrl = item.image && typeof item.image === 'object' ? item.image.url : null
+  const imageAlt = item.image && typeof item.image === 'object' ? item.image.alt : item.title
+
+  const inner = imageUrl ? (
+    <>
+      <Image src={imageUrl} alt={imageAlt ?? item.title} fill className="object-cover" />
+      {item.imageUrl && (
+        <div className="absolute inset-0 bg-background/0 group-hover:bg-background/20 transition-colors duration-200" />
+      )}
+      {item.imageUrl && (
+        <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+          <i className="ti ti-external-link text-foreground/80" style={{ fontSize: 20 }} aria-hidden="true" />
+        </div>
+      )}
+    </>
+  ) : (
+    <div className="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-muted/50">
+      <i className="ti ti-photo-off text-foreground/15" style={{ fontSize: 32 }} aria-hidden="true" />
+      <span className="text-xs text-foreground/20">Coming soon</span>
+    </div>
+  )
+
+  if (item.imageUrl) {
+    return (
+      
+        href={item.imageUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="block relative w-full aspect-video overflow-hidden rounded-t-xl group"
+      >
+        {inner}
+      </a>
+    )
+  }
+
+  return (
+    <div className="relative w-full aspect-video overflow-hidden rounded-t-xl">
+      {inner}
+    </div>
+  )
+}
 
 export function ShowcaseBlock({ heading, subheading, items }: ShowcaseBlockProps) {
   if (!Array.isArray(items) || items.length === 0) return null
@@ -44,93 +85,16 @@ export function ShowcaseBlock({ heading, subheading, items }: ShowcaseBlockProps
       )}
 
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-        {items.map((item, i) => {
-          const imageUrl =
-            item.image && typeof item.image === 'object' ? item.image.url : null
-          const imageAlt =
-            item.image && typeof item.image === 'object' ? item.image.alt : item.title
+        {items.map((item, i) => (
+          <div
+            key={i}
+            className="bg-muted/50 border-0 rounded-xl overflow-hidden flex flex-col"
+          >
+            <ShowcaseImage item={item} />
 
-          const imageContent = imageUrl ? (
-            <Image
-              src={imageUrl}
-              alt={imageAlt ?? item.title}
-              fill
-              className="object-cover"
-            />
-          ) : (
-            <div className="absolute inset-0 flex flex-col items-center justify-center gap-2">
-              <i className="ti ti-photo-off text-foreground/15" style={{ fontSize: 32 }} aria-hidden="true" />
-              <span className="text-xs text-foreground/20">Coming soon</span>
-            </div>
-          )
+            <div className="p-4 flex flex-col gap-3 flex-1">
+              <h3 className="text-sm font-medium text-foreground/85">{item.title}</h3>
 
-          const imageWrapper = item.imageUrl ? (
-            
-              href={item.imageUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="block relative w-full aspect-video overflow-hidden rounded-t-xl group"
-            >
-              {imageContent}
-              <div className="absolute inset-0 bg-background/0 group-hover:bg-background/20 transition-colors duration-200" />
-              <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
-                <i className="ti ti-external-link text-foreground/80" style={{ fontSize: 20 }} aria-hidden="true" />
-              </div>
-            </a>
-          ) : (
-            <div className={`relative w-full aspect-video overflow-hidden rounded-t-xl ${!imageUrl ? COMING_SOON_BG : ''}`}>
-              {imageContent}
-            </div>
-          )
-
-          return (
-            <div
-              key={i}
-              className="bg-muted/50 border-0 rounded-xl overflow-hidden flex flex-col"
-            >
-              {imageWrapper}
-
-              <div className="p-4 flex flex-col gap-3 flex-1">
-                <h3 className="text-sm font-medium text-foreground/85">{item.title}</h3>
-
-                {item.description && (
-                  <p className="text-xs text-foreground/50 leading-relaxed">{item.description}</p>
-                )}
-
-                {Array.isArray(item.tags) && item.tags.length > 0 && (
-                  <div className="flex flex-wrap gap-1.5">
-                    {item.tags.map(({ tag }, j) => (
-                      <span
-                        key={j}
-                        className="text-xs text-foreground/50 bg-background/50 border border-foreground/10 rounded-full px-2.5 py-0.5"
-                      >
-                        {tag}
-                      </span>
-                    ))}
-                  </div>
-                )}
-
-                {Array.isArray(item.links) && item.links.length > 0 && (
-                  <div className="flex flex-wrap gap-3 mt-auto pt-2 border-t border-foreground/8">
-                    {item.links.map((link, k) => (
-                      
-                        key={k}
-                        href={link.url}
-                        target={link.newTab ? '_blank' : '_self'}
-                        rel="noopener noreferrer"
-                        className="flex items-center gap-1.5 text-xs text-foreground/50 hover:text-foreground/80 transition-colors"
-                      >
-                        <i className="ti ti-external-link" style={{ fontSize: 13 }} aria-hidden="true" />
-                        {link.label}
-                      </a>
-                    ))}
-                  </div>
-                )}
-              </div>
-            </div>
-          )
-        })}
-      </div>
-    </section>
-  )
-}
\ No newline at end of file
+              {item.description && (
+                <p className="text-xs text-foreground/50 leading-relaxed">{item.description}</p>
+              )}
\ No newline at end of file