From 05fc57928b6993f218a073e42f6508ec1565d918 Mon Sep 17 00:00:00 2001
From: Mackie <iwan.mackie@gmail.com>
Date: Sat, 6 Jun 2026 08:35:42 +0800
Subject: [PATCH] tab

---
 src/blocks/Showcase/Component.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/blocks/Showcase/Component.tsx b/src/blocks/Showcase/Component.tsx
index 4ce1076..427e6e3 100644
--- a/src/blocks/Showcase/Component.tsx
+++ b/src/blocks/Showcase/Component.tsx
@@ -5,12 +5,12 @@ import Image from 'next/image'
 import { Container } from '@/components/ui/Container'
 import type { Media as MediaType } from '@/payload-types'
 
-// Updated type to include category for the 15-project Lab structure
 type ShowcaseItem = {
   image?: MediaType | null
   imageUrl?: string
   title: string
   description?: string
+  // Added category field to match CMS configuration
   category: 'engineering' | 'design'
   tags?: { tag: string }[]
   links?: { label: string; url: string; newTab?: boolean }[]
@@ -64,6 +64,7 @@ export function ShowcaseBlock(props: ShowcaseBlockProps): React.ReactElement | n
 
   if (!Array.isArray(items) || items.length === 0) return null
 
+  // Filters items based on the 'category' field defined in CMS
   const filteredItems = filter === 'all' ? items : items.filter((item) => item.category === filter)
 
   return (
@@ -74,7 +75,7 @@ export function ShowcaseBlock(props: ShowcaseBlockProps): React.ReactElement | n
           {subheading && <p className="text-sm text-foreground/40">{subheading}</p>}
         </div>
 
-        {/* Filter Navigation */}
+        {/* Category Filter Navigation */}
         <div className="flex gap-2">
           {(['all', 'engineering', 'design'] as const).map((f) => (
             <button
@@ -100,7 +101,13 @@ export function ShowcaseBlock(props: ShowcaseBlockProps): React.ReactElement | n
           >
             <ShowcaseImage item={item} />
             <div className="p-4 flex flex-col gap-3 flex-1">
-              <h3 className="text-sm font-medium text-foreground/85">{item.title}</h3>
+              <div className="flex justify-between items-start gap-2">
+                <h3 className="text-sm font-medium text-foreground/85">{item.title}</h3>
+                {/* Visualizing the category on the card */}
+                <span className="text-[10px] uppercase tracking-wider text-foreground/20 font-semibold">
+                  {item.category}
+                </span>
+              </div>
               {item.description && (
                 <p className="text-xs text-foreground/40 leading-relaxed">{item.description}</p>
               )}