Edit: add functionality to expand images on click and collapse on click on expanded im

.project_index.json

@@ -38,7 +38,7 @@
     "is_react": true,
     "has_default_export": true,
     "has_jsx": true,
-    "has_use_client": false,
+    "has_use_client": true,
     "has_return_jsx": true,
     "role": "entry",
     "tags": [],

src/app/layout.tsx

@@ -1,4 +1,79 @@
-import type { Metadata } from "next";
+import { Metadata } from 'next';
+'use client';
+import { useState, useEffect } from 'react';
+
+function ImagePopup() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [imageSrc, setImageSrc] = useState('');
+
+  useEffect(() => {
+    const handleClick = (e) => {
+      if (e.target.tagName === 'IMG' && !e.target.closest('[data-no-popup]')) {
+        setImageSrc(e.target.src);
+        setIsOpen(true);
+      }
+    };
+    document.addEventListener('click', handleClick);
+    return () => document.removeEventListener('click', handleClick);
+  }, []);
+
+  if (!isOpen) return null;
+  return (
+    <div className='fixed inset-0 z-[9999] bg-black/80 flex items-center justify-center cursor-pointer' onClick={() => setIsOpen(false)}>
+      <img src={imageSrc} alt='Expanded' className='max-w-[90vw] max-h-[90vh] object-contain' />
+    </div>
+  );
+}
+'use client';
+import { useState, useEffect } from 'react';
+
+function ImagePopup() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [imageSrc, setImageSrc] = useState('');
+
+  useEffect(() => {
+    const handleClick = (e) => {
+      if (e.target.tagName === 'IMG' && !e.target.closest('[data-no-popup]')) {
+        setImageSrc(e.target.src);
+        setIsOpen(true);
+      }
+    };
+    document.addEventListener('click', handleClick);
+    return () => document.removeEventListener('click', handleClick);
+  }, []);
+
+  if (!isOpen) return null;
+  return (
+    <div className='fixed inset-0 z-[9999] bg-black/80 flex items-center justify-center cursor-pointer' onClick={() => setIsOpen(false)}>
+      <img src={imageSrc} alt='Expanded' className='max-w-[90vw] max-h-[90vh] object-contain' />
+    </div>
+  );
+}
+'use client';
+import { useState, useEffect } from 'react';
+
+function ImagePopup() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [imageSrc, setImageSrc] = useState('');
+
+  useEffect(() => {
+    const handleClick = (e) => {
+      if (e.target.tagName === 'IMG' && !e.target.closest('[data-no-popup]')) {
+        setImageSrc(e.target.src);
+        setIsOpen(true);
+      }
+    };
+    document.addEventListener('click', handleClick);
+    return () => document.removeEventListener('click', handleClick);
+  }, []);
+
+  if (!isOpen) return null;
+  return (
+    <div className='fixed inset-0 z-[9999] bg-black/80 flex items-center justify-center cursor-pointer' onClick={() => setIsOpen(false)}>
+      <img src={imageSrc} alt='Expanded' className='max-w-[90vw] max-h-[90vh] object-contain' />
+    </div>
+  );
+}
 import { Manrope } from "next/font/google";
 import "./globals.css";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
@@ -128,7 +203,7 @@ export default function RootLayout({
     
     const existingId = element.getAttribute('data-webild-id');
     if (existingId) {
-      return '[data-webild-id="' + existingId + '"]';
+      return '[data-webild-id="' + uniqueId + '"]';a-webild-id="' + existingId + '"]';
     }
     
     if (assignId) {