Update CustomImage to support caption using figure element

Signed-off-by: Vivek Vishal <[email protected]>

Author: Vivek Vishal

src/custom/CustomImage/CustomImage.tsx

@@ -13,35 +13,61 @@ interface ImageComponentProps {
   srcSet?: string;
   className?: string;
   style?: React.CSSProperties;
+  caption?: string;
+  align?: 'left' | 'center' | 'right';
   onClick?: (event: React.MouseEvent<HTMLImageElement, MouseEvent>) => void;
 }
 
-const CustomImage: React.FC<ImageComponentProps> = ({ src, alt, ...props }) => {
+const CustomImage: React.FC<ImageComponentProps> = ({ 
+  src, 
+  alt, 
+  caption, 
+  align = 'left',
+  ...props 
+}) => {
   const [isZoomed, setIsZoomed] = useState(false);
-
   const handleZoomClick = () => {
     setIsZoomed(true);
   };
-
   const handleZoomClose = () => {
     setIsZoomed(false);
   };
-
+  
+  const figureStyle: React.CSSProperties = {
+    margin: '1rem 0',
+    textAlign: align,
+    width: '100%',
+    ...props.style
+  };
+  
+  const captionStyle: React.CSSProperties = {
+    fontSize: '0.9rem',
+    color: '#666',
+    marginTop: '0.5rem',
+    textAlign: align
+  };
+  
   return (
     <>
-      <img
-        src={src}
-        alt={alt}
-        loading="lazy"
-        onClick={handleZoomClick}
-        {...props}
-        style={{
-          cursor: 'pointer',
-          maxWidth: '100%',
-          height: 'auto',
-          ...props.style
-        }}
-      />
+      <figure style={figureStyle}>
+        <img
+          src={src}
+          alt={alt || caption || ''}
+          loading="lazy"
+          onClick={handleZoomClick}
+          {...props}
+          style={{
+            cursor: 'pointer',
+            maxWidth: '100%',
+            height: 'auto',
+            boxShadow: 'rgba(149, 157, 165, 0.2) 0px 8px 24px',
+            borderRadius: '15px',
+            width: '50%'
+          }}
+        />
+        {caption && <figcaption style={captionStyle}>{caption}</figcaption>}
+      </figure>
+      
       <Dialog
         open={isZoomed}
         onClose={handleZoomClose}
@@ -59,7 +85,7 @@ const CustomImage: React.FC<ImageComponentProps> = ({ src, alt, ...props }) => {
       >
         <img
           src={src}
-          alt={alt}
+          alt={alt || caption || ''}
           onClick={handleZoomClose}
           style={{
             objectFit: 'contain',