fix: remove image caption from PortfolioMedia and prevent default behavior on image click in Slider

Author: hrgui

src/components/portfolio/PortfolioMedia.tsx

@@ -1,5 +1,4 @@
 import { type PortfolioFrontmatter } from "~/types/frontmatter";
-import { useState } from "preact/hooks";
 import Slider from "~/components/portfolio/Slider/Slider";
 
 type Props = Pick<
@@ -8,7 +7,6 @@ type Props = Pick<
 >;
 
 const PortfolioMedia = ({ images, thumbnail, title, iframe }: Props) => {
-  const [currentImageIndex, setCurrentImageIndex] = useState(0);
   const hasIframe = Boolean(iframe);
 
   return (
@@ -24,11 +22,7 @@ const PortfolioMedia = ({ images, thumbnail, title, iframe }: Props) => {
       )}
       {!hasIframe && images && (
         <>
-          <Slider
-            isFullBleed
-            data-testid="portfolio-media-slider"
-            onIndexChange={setCurrentImageIndex}
-          >
+          <Slider isFullBleed data-testid="portfolio-media-slider">
             {images.map((img, i) => {
               return (
                 <div key={i}>
@@ -43,11 +37,6 @@ const PortfolioMedia = ({ images, thumbnail, title, iframe }: Props) => {
               );
             })}
           </Slider>
-          <div className="bg-surface-container-lowest/60 py-3 px-4 text-center">
-            <p className="text-sm text-on-surface/70">
-              {images[currentImageIndex]?.src.split("/").pop() || ""}
-            </p>
-          </div>
         </>
       )}
       {hasIframe && thumbnail && (

src/components/portfolio/Slider/Slider.tsx

@@ -131,6 +131,7 @@ export default function Slider({
   const handleImageClick = (e: MouseEvent) => {
     const target = e.target as HTMLImageElement;
     if (target.tagName === "IMG") {
+      e.preventDefault();
       setIsDialogOpen(true);
     }
   };
@@ -269,9 +270,11 @@ export default function Slider({
                 className:
                   "max-h-[90vh] max-w-[90vw] object-contain cursor-pointer",
                 onClick: (e: MouseEvent) => {
+                  e.stopPropagation();
                   const target = e.target as HTMLImageElement;
                   if (target.src) {
                     window.open(target.src, "_blank");
+                    setIsDialogOpen(false);
                   }
                 },
               })}