From 502acf04e5b91edc7081e7cd33d61023c9d17c6a Mon Sep 17 00:00:00 2001
From: Mackie <iwan.mackie@gmail.com>
Date: Wed, 3 Jun 2026 15:58:04 +0800
Subject: [PATCH] edited

---
 src/blocks/BentoRow/Component.tsx | 47 ++++++++--------
 src/blocks/Contact/Component.tsx  | 92 +++++++++++++++----------------
 src/blocks/Showcase/Component.tsx | 85 ++++++++++++++--------------
 src/heros/SplitHero/index.tsx     | 57 +++++++------------
 4 files changed, 133 insertions(+), 148 deletions(-)

diff --git a/src/blocks/BentoRow/Component.tsx b/src/blocks/BentoRow/Component.tsx
index 3ce1a3e..0161ed5 100644
--- a/src/blocks/BentoRow/Component.tsx
+++ b/src/blocks/BentoRow/Component.tsx
@@ -14,17 +14,12 @@ type BentoRowBlockProps = {
   skills?: Skill[]
 }
 
-export function BentoRowBlock({
-  aboutHeading,
-  aboutText,
-  aboutCta,
-  skillsHeading,
-  skills,
-}: BentoRowBlockProps) {
+export function BentoRowBlock(props: BentoRowBlockProps) {
+  const { aboutHeading, aboutText, aboutCta, skillsHeading, skills } = props
+
   return (
     <section className="w-full max-w-5xl mx-auto px-6 py-16">
       <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-
         <div className="bg-muted/50 border border-foreground/8 rounded-xl p-6 flex flex-col justify-between gap-6">
           <div>
             {aboutHeading && (
@@ -38,8 +33,8 @@ export function BentoRowBlock({
               </p>
             )}
           </div>
-          {aboutCta?.label && aboutCta?.url && (
-            
+          {aboutCta && aboutCta.label && aboutCta.url && (
+            <a
               href={aboutCta.url}
               target={aboutCta.newTab ? '_blank' : '_self'}
               rel="noopener noreferrer"
@@ -59,9 +54,14 @@ export function BentoRowBlock({
           )}
           {Array.isArray(skills) && skills.length > 0 && (
             <div className="grid grid-cols-2 gap-2">
-              {skills.map((skill, i) => {
+              {skills.map(function (skill, i) {
                 const tags = skill.tags
-                  ? skill.tags.split(',').map((t) => t.trim()).filter(Boolean)
+                  ? skill.tags
+                      .split(',')
+                      .map(function (t) {
+                        return t.trim()
+                      })
+                      .filter(Boolean)
                   : []
                 return (
                   <div
@@ -69,20 +69,22 @@ export function BentoRowBlock({
                     className="bg-background/50 border border-foreground/8 rounded-lg p-3 flex flex-col gap-2"
                   >
                     <i
-                      className={`ti ${skill.icon} text-foreground/30`}
+                      className={'ti ' + skill.icon + ' text-foreground/30'}
                       style={{ fontSize: 16 }}
                       aria-hidden="true"
                     />
                     <p className="text-xs font-medium text-foreground/70">{skill.title}</p>
                     <div className="flex flex-wrap gap-1">
-                      {tags.map((tag, j) => (
-                        <span
-                          key={j}
-                          className="text-xs text-foreground/30 border border-foreground/8 rounded-full px-2 py-0.5"
-                        >
-                          {tag}
-                        </span>
-                      ))}
+                      {tags.map(function (tag, j) {
+                        return (
+                          <span
+                            key={j}
+                            className="text-xs text-foreground/30 border border-foreground/8 rounded-full px-2 py-0.5"
+                          >
+                            {tag}
+                          </span>
+                        )
+                      })}
                     </div>
                   </div>
                 )
@@ -90,8 +92,7 @@ export function BentoRowBlock({
             </div>
           )}
         </div>
-
       </div>
     </section>
   )
-}
\ No newline at end of file
+}
diff --git a/src/blocks/Contact/Component.tsx b/src/blocks/Contact/Component.tsx
index 2640950..996017a 100644
--- a/src/blocks/Contact/Component.tsx
+++ b/src/blocks/Contact/Component.tsx
@@ -15,28 +15,20 @@ type ContactBlockProps = {
   links?: ContactLink[]
 }
 
-export function ContactBlock({
-  heading,
-  subtext,
-  email,
-  links,
-}: ContactBlockProps) {
+export function ContactBlock(props: ContactBlockProps) {
+  const { heading, subtext, email, links } = props
+
   return (
     <section className="w-full max-w-5xl mx-auto px-6 py-16">
       <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-
         <div className="bg-muted/50 border border-foreground/8 rounded-xl p-6 flex flex-col justify-between gap-6">
           <div>
-            {heading && (
-              <h2 className="text-xl font-medium text-foreground mb-3">{heading}</h2>
-            )}
-            {subtext && (
-              <p className="text-sm text-foreground/50 leading-relaxed">{subtext}</p>
-            )}
+            {heading && <h2 className="text-xl font-medium text-foreground mb-3">{heading}</h2>}
+            {subtext && <p className="text-sm text-foreground/50 leading-relaxed">{subtext}</p>}
           </div>
           {email && (
-            
-              href={`mailto:${email}`}
+            <a
+              href={'mailto:' + email}
               className="self-start flex items-center gap-2 text-sm font-medium text-foreground/70 bg-background/50 border border-foreground/10 rounded-lg px-5 py-2.5 hover:text-foreground hover:bg-muted transition-colors"
             >
               <i className="ti ti-mail" style={{ fontSize: 14 }} aria-hidden="true" />
@@ -46,39 +38,45 @@ export function ContactBlock({
         </div>
 
         <div className="flex flex-col gap-2">
-          {Array.isArray(links) && links.map((link, i) => (
-            
-              key={i}
-              href={link.url}
-              target={link.newTab ? '_blank' : '_self'}
-              rel="noopener noreferrer"
-              className="flex items-center gap-3 bg-muted/50 border border-foreground/8 rounded-xl px-5 py-4 hover:bg-muted/70 transition-colors group"
-            >
-              {link.icon && (
-                <i
-                  className={`ti ${link.icon} text-foreground/40 group-hover:text-foreground/60 transition-colors`}
-                  style={{ fontSize: 18 }}
-                  aria-hidden="true"
-                />
-              )}
-              <div className="flex flex-col">
-                <span className="text-sm font-medium text-foreground/70 group-hover:text-foreground/90 transition-colors">
-                  {link.label}
-                </span>
-                {link.sublabel && (
-                  <span className="text-xs text-foreground/30">{link.sublabel}</span>
-                )}
-              </div>
-              <i
-                className="ti ti-arrow-right text-foreground/20 group-hover:text-foreground/40 transition-colors ml-auto"
-                style={{ fontSize: 14 }}
-                aria-hidden="true"
-              />
-            </a>
-          ))}
+          {Array.isArray(links) &&
+            links.map(function (link, i) {
+              return (
+                <a
+                  key={i}
+                  href={link.url}
+                  target={link.newTab ? '_blank' : '_self'}
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-3 bg-muted/50 border border-foreground/8 rounded-xl px-5 py-4 hover:bg-muted/70 transition-colors group"
+                >
+                  {link.icon && (
+                    <i
+                      className={
+                        'ti ' +
+                        link.icon +
+                        ' text-foreground/40 group-hover:text-foreground/60 transition-colors'
+                      }
+                      style={{ fontSize: 18 }}
+                      aria-hidden="true"
+                    />
+                  )}
+                  <div className="flex flex-col">
+                    <span className="text-sm font-medium text-foreground/70 group-hover:text-foreground/90 transition-colors">
+                      {link.label}
+                    </span>
+                    {link.sublabel && (
+                      <span className="text-xs text-foreground/30">{link.sublabel}</span>
+                    )}
+                  </div>
+                  <i
+                    className="ti ti-arrow-right text-foreground/20 group-hover:text-foreground/40 transition-colors ml-auto"
+                    style={{ fontSize: 14 }}
+                    aria-hidden="true"
+                  />
+                </a>
+              )
+            })}
         </div>
-
       </div>
     </section>
   )
-}
\ No newline at end of file
+}
diff --git a/src/blocks/Showcase/Component.tsx b/src/blocks/Showcase/Component.tsx
index 8459115..68647eb 100644
--- a/src/blocks/Showcase/Component.tsx
+++ b/src/blocks/Showcase/Component.tsx
@@ -21,36 +21,45 @@ function ShowcaseImage(props: { item: ShowcaseItem }): React.ReactElement {
   const item = props.item
   const image = item.image
   const imageUrl = image != null && typeof image === 'object' && 'url' in image ? image.url : null
-  const imageAlt = image != null && typeof image === 'object' && 'alt' in image ? image.alt : item.title
-
-  if (imageUrl != null && item.imageUrl != null) {
-    return (
-      
-        href={item.imageUrl}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="block relative w-full aspect-video overflow-hidden group"
-      >
-        <Image src={imageUrl} alt={imageAlt ?? item.title} fill className="object-cover" />
-        <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>
-    )
-  }
+  const imageAlt =
+    image != null && typeof image === 'object' && 'alt' in image ? image.alt : item.title
 
   if (imageUrl != null) {
-    return (
+    const imgEl = (
       <div className="relative w-full aspect-video overflow-hidden">
         <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>
     )
+
+    if (item.imageUrl) {
+      return (
+        <a href={item.imageUrl} target="_blank" rel="noopener noreferrer" className="block group">
+          {imgEl}
+        </a>
+      )
+    }
+    return imgEl
   }
 
   return (
     <div className="relative w-full aspect-video bg-muted/30 flex flex-col items-center justify-center gap-2 border-b border-foreground/8">
-      <i className="ti ti-photo-off text-foreground/15" style={{ fontSize: 28 }} aria-hidden="true" />
+      <i
+        className="ti ti-photo-off text-foreground/15"
+        style={{ fontSize: 28 }}
+        aria-hidden="true"
+      />
       <span className="text-xs text-foreground/20">Coming soon</span>
     </div>
   )
@@ -65,38 +74,27 @@ export function ShowcaseBlock(props: ShowcaseBlockProps): React.ReactElement | n
     <section className="w-full max-w-5xl mx-auto px-6 py-16">
       {(heading || subheading) && (
         <div className="mb-8">
-          {heading && (
-            <h2 className="text-2xl font-medium text-foreground mb-2">{heading}</h2>
-          )}
-          {subheading && (
-            <p className="text-sm text-foreground/40">{subheading}</p>
-          )}
+          {heading && <h2 className="text-2xl font-medium text-foreground mb-2">{heading}</h2>}
+          {subheading && <p className="text-sm text-foreground/40">{subheading}</p>}
         </div>
       )}
-
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
         {items.map(function (item, i) {
           const isFeatured = i === 0 && items.length > 1
           return (
             <div
               key={i}
-              className={`bg-muted/50 border border-foreground/8 rounded-xl overflow-hidden flex flex-col ${isFeatured ? 'sm:col-span-2 lg:col-span-2' : ''}`}
+              className={
+                'bg-muted/50 border border-foreground/8 rounded-xl overflow-hidden flex flex-col' +
+                (isFeatured ? ' sm:col-span-2 lg:col-span-2' : '')
+              }
             >
               <ShowcaseImage item={item} />
-
               <div className="p-4 flex flex-col gap-3 flex-1">
-                {item.description && (
-                  <span className="text-xs text-foreground/30 border border-foreground/8 rounded-full px-2.5 py-0.5 self-start">
-                    {item.description.length > 40 ? item.description.slice(0, 40) + '...' : item.description}
-                  </span>
-                )}
-
                 <h3 className="text-sm font-medium text-foreground/85">{item.title}</h3>
-
-                {item.description && item.description.length > 40 && (
+                {item.description && (
                   <p className="text-xs text-foreground/40 leading-relaxed">{item.description}</p>
                 )}
-
                 {Array.isArray(item.tags) && item.tags.length > 0 && (
                   <div className="flex flex-wrap gap-1.5">
                     {item.tags.map(function (t, j) {
@@ -111,19 +109,22 @@ export function ShowcaseBlock(props: ShowcaseBlockProps): React.ReactElement | n
                     })}
                   </div>
                 )}
-
                 {Array.isArray(item.links) && item.links.length > 0 && (
                   <div className="flex flex-wrap gap-3 mt-auto pt-3 border-t border-foreground/8">
                     {item.links.map(function (link, k) {
                       return (
-                        
+                        <a
                           key={k}
                           href={link.url}
                           target={link.newTab ? '_blank' : '_self'}
                           rel="noopener noreferrer"
                           className="flex items-center gap-1.5 text-xs text-foreground/40 hover:text-foreground/70 transition-colors"
                         >
-                          <i className="ti ti-external-link" style={{ fontSize: 12 }} aria-hidden="true" />
+                          <i
+                            className="ti ti-external-link"
+                            style={{ fontSize: 12 }}
+                            aria-hidden="true"
+                          />
                           {link.label}
                         </a>
                       )
@@ -137,4 +138,4 @@ export function ShowcaseBlock(props: ShowcaseBlockProps): React.ReactElement | n
       </div>
     </section>
   )
-}
\ No newline at end of file
+}
diff --git a/src/heros/SplitHero/index.tsx b/src/heros/SplitHero/index.tsx
index e5672de..3ffcbb9 100644
--- a/src/heros/SplitHero/index.tsx
+++ b/src/heros/SplitHero/index.tsx
@@ -13,15 +13,8 @@ type SplitHeroProps = Page['hero'] & {
   splitImage?: MediaType | null
 }
 
-export const SplitHero: React.FC<SplitHeroProps> = ({
-  eyebrow,
-  heading,
-  subtext,
-  tags,
-  primaryCta,
-  secondaryCta,
-  splitImage,
-}) => {
+export const SplitHero: React.FC<SplitHeroProps> = function (props) {
+  const { eyebrow, heading, subtext, tags, primaryCta, secondaryCta, splitImage } = props
   const hasImage = splitImage && typeof splitImage === 'object' && splitImage.url
 
   return (
@@ -29,9 +22,7 @@ export const SplitHero: React.FC<SplitHeroProps> = ({
       <div className="flex flex-col justify-between gap-8 px-8 py-14 md:border-r border-foreground/8">
         <div>
           {eyebrow && (
-            <p className="text-xs tracking-widest uppercase text-foreground/30 mb-5">
-              {eyebrow}
-            </p>
+            <p className="text-xs tracking-widest uppercase text-foreground/30 mb-5">{eyebrow}</p>
           )}
           {heading && (
             <h1 className="text-4xl font-medium text-foreground leading-[1.1] mb-4 whitespace-pre-line">
@@ -39,26 +30,26 @@ export const SplitHero: React.FC<SplitHeroProps> = ({
             </h1>
           )}
           {subtext && (
-            <p className="text-sm text-foreground/50 leading-relaxed max-w-sm mb-6">
-              {subtext}
-            </p>
+            <p className="text-sm text-foreground/50 leading-relaxed max-w-sm mb-6">{subtext}</p>
           )}
           {Array.isArray(tags) && tags.length > 0 && (
-            <div className="flex flex-wrap gap-2 mb-6">
-              {tags.map(({ tag }, i) => (
-                <span
-                  key={i}
-                  className="text-xs text-foreground/40 border border-foreground/10 rounded-full px-3 py-1"
-                >
-                  {tag}
-                </span>
-              ))}
+            <div className="flex flex-wrap gap-2">
+              {tags.map(function ({ tag }, i) {
+                return (
+                  <span
+                    key={i}
+                    className="text-xs text-foreground/40 border border-foreground/10 rounded-full px-3 py-1"
+                  >
+                    {tag}
+                  </span>
+                )
+              })}
             </div>
           )}
         </div>
         <div className="flex gap-3">
-          {primaryCta?.label && primaryCta?.url && (
-            
+          {primaryCta && primaryCta.label && primaryCta.url && (
+            <a
               href={primaryCta.url}
               className="flex items-center gap-2 text-sm font-medium text-foreground bg-muted/50 border border-foreground/10 rounded-lg px-5 py-2.5 hover:bg-muted transition-colors"
             >
@@ -66,8 +57,8 @@ export const SplitHero: React.FC<SplitHeroProps> = ({
               {primaryCta.label}
             </a>
           )}
-          {secondaryCta?.label && secondaryCta?.url && (
-            
+          {secondaryCta && secondaryCta.label && secondaryCta.url && (
+            <a
               href={secondaryCta.url}
               className="flex items-center gap-2 text-sm text-foreground/50 border border-foreground/10 rounded-lg px-5 py-2.5 hover:text-foreground/80 hover:bg-muted/30 transition-colors"
             >
@@ -77,16 +68,10 @@ export const SplitHero: React.FC<SplitHeroProps> = ({
           )}
         </div>
       </div>
-
       <div className="bg-muted/30 flex items-center justify-center min-h-[260px]">
         {hasImage ? (
           <div className="relative w-full h-full min-h-[260px]">
-            <Image
-              src={splitImage.url!}
-              alt={splitImage.alt ?? ''}
-              fill
-              className="object-cover"
-            />
+            <Image src={splitImage.url!} alt={splitImage.alt ?? ''} fill className="object-cover" />
           </div>
         ) : (
           <div className="flex flex-col items-center justify-center gap-2 opacity-20">
@@ -96,4 +81,4 @@ export const SplitHero: React.FC<SplitHeroProps> = ({
       </div>
     </div>
   )
-}
\ No newline at end of file
+}