Auto-commit: add functionality fo expand all the images on click. it should be expanded in popup. second click sh
This commit is contained in:
@@ -34,7 +34,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": [],
|
||||
@@ -397,11 +397,11 @@
|
||||
"role": "ui",
|
||||
"tags": [],
|
||||
"used_in": [
|
||||
"src/components/cardStack/CardStack.tsx",
|
||||
"src/components/cardStack/layouts/carousels/ButtonCarousel.tsx",
|
||||
"src/components/cardStack/layouts/carousels/AutoCarousel.tsx",
|
||||
"src/components/cardStack/CardStack.tsx",
|
||||
"src/components/cardStack/layouts/carousels/FullWidthCarousel.tsx",
|
||||
"src/components/cardStack/layouts/grid/GridLayout.tsx",
|
||||
"src/components/cardStack/layouts/carousels/AutoCarousel.tsx"
|
||||
"src/components/cardStack/layouts/grid/GridLayout.tsx"
|
||||
],
|
||||
"can_modify_directly": true,
|
||||
"can_delete": true,
|
||||
@@ -420,15 +420,15 @@
|
||||
"product"
|
||||
],
|
||||
"used_in": [
|
||||
"src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx",
|
||||
"src/components/cardStack/layouts/carousels/ButtonCarousel.tsx",
|
||||
"src/components/cardStack/layouts/carousels/AutoCarousel.tsx",
|
||||
"src/components/cardStack/layouts/timelines/TimelineBase.tsx",
|
||||
"src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx",
|
||||
"src/components/cardStack/layouts/carousels/FullWidthCarousel.tsx",
|
||||
"src/components/cardStack/layouts/grid/GridLayout.tsx",
|
||||
"src/components/cardStack/layouts/carousels/AutoCarousel.tsx",
|
||||
"src/components/cardStack/layouts/timelines/TimelineHorizontalCardStack.tsx",
|
||||
"src/components/cardStack/layouts/timelines/TimelineCardStack.tsx",
|
||||
"src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx",
|
||||
"src/components/cardStack/layouts/timelines/TimelineBase.tsx"
|
||||
"src/components/cardStack/layouts/timelines/TimelineHorizontalCardStack.tsx",
|
||||
"src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx"
|
||||
],
|
||||
"can_modify_directly": true,
|
||||
"can_delete": true,
|
||||
@@ -680,10 +680,10 @@
|
||||
],
|
||||
"used_in": [
|
||||
"src/components/cardStack/layouts/carousels/ButtonCarousel.tsx",
|
||||
"src/components/cardStack/layouts/grid/GridLayout.tsx",
|
||||
"src/components/cardStack/layouts/carousels/AutoCarousel.tsx",
|
||||
"src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx",
|
||||
"src/components/cardStack/layouts/timelines/TimelineBase.tsx"
|
||||
"src/components/cardStack/layouts/timelines/TimelineBase.tsx",
|
||||
"src/components/cardStack/layouts/grid/GridLayout.tsx",
|
||||
"src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx"
|
||||
],
|
||||
"can_modify_directly": true,
|
||||
"can_delete": true,
|
||||
@@ -1386,8 +1386,8 @@
|
||||
"button"
|
||||
],
|
||||
"used_in": [
|
||||
"src/components/navbar/NavbarStyleCentered/NavbarStyleCentered.tsx",
|
||||
"src/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen.tsx"
|
||||
"src/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen.tsx",
|
||||
"src/components/navbar/NavbarStyleCentered/NavbarStyleCentered.tsx"
|
||||
],
|
||||
"can_modify_directly": true,
|
||||
"can_delete": true,
|
||||
@@ -1421,11 +1421,11 @@
|
||||
"role": "ui",
|
||||
"tags": [],
|
||||
"used_in": [
|
||||
"src/components/navbar/NavbarStyleCentered/NavbarStyleCentered.tsx",
|
||||
"src/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay.tsx",
|
||||
"src/components/navbar/NavbarStyleApple/NavbarStyleApple.tsx",
|
||||
"src/components/navbar/NavbarLayoutFloatingInline.tsx",
|
||||
"src/components/navbar/NavbarStyleMinimal.tsx",
|
||||
"src/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay.tsx",
|
||||
"src/components/navbar/NavbarStyleCentered/NavbarStyleCentered.tsx",
|
||||
"src/components/navbar/NavbarLayoutFloatingInline.tsx",
|
||||
"src/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen.tsx"
|
||||
],
|
||||
"can_modify_directly": true,
|
||||
@@ -3178,8 +3178,8 @@
|
||||
"button"
|
||||
],
|
||||
"used_in": [
|
||||
"src/components/Textbox.tsx",
|
||||
"src/components/navbar/NavbarLayoutFloatingInline.tsx",
|
||||
"src/components/Textbox.tsx",
|
||||
"src/components/navbar/NavbarStyleMinimal.tsx",
|
||||
"src/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay.tsx"
|
||||
],
|
||||
@@ -3232,10 +3232,10 @@
|
||||
"role": "ui",
|
||||
"tags": [],
|
||||
"used_in": [
|
||||
"src/components/button/ButtonTextStagger/ButtonTextStagger.tsx",
|
||||
"src/components/button/ButtonBounceEffect/ButtonBounceEffect.tsx",
|
||||
"src/components/button/ButtonShiftHover/ButtonShiftHover.tsx",
|
||||
"src/components/button/ButtonTextShift/ButtonTextShift.tsx",
|
||||
"src/components/button/ButtonBounceEffect/ButtonBounceEffect.tsx"
|
||||
"src/components/button/ButtonTextStagger/ButtonTextStagger.tsx"
|
||||
],
|
||||
"can_modify_directly": true,
|
||||
"can_delete": true,
|
||||
@@ -3254,16 +3254,16 @@
|
||||
"button"
|
||||
],
|
||||
"used_in": [
|
||||
"src/components/button/ButtonTextShift/ButtonTextShift.tsx",
|
||||
"src/components/button/ButtonHoverMagnetic/ButtonHoverMagnetic.tsx",
|
||||
"src/components/button/ButtonElasticEffect/ButtonElasticEffect.tsx",
|
||||
"src/components/button/ButtonBounceEffect/ButtonBounceEffect.tsx",
|
||||
"src/components/button/ButtonShiftHover/ButtonShiftHover.tsx",
|
||||
"src/components/button/ButtonHoverBubble.tsx",
|
||||
"src/components/button/ButtonHoverMagnetic/ButtonHoverMagnetic.tsx",
|
||||
"src/components/button/ButtonExpandHover.tsx",
|
||||
"src/components/button/ButtonTextUnderline.tsx",
|
||||
"src/components/button/ButtonTextStagger/ButtonTextStagger.tsx",
|
||||
"src/components/button/ButtonDirectionalHover/ButtonDirectionalHover.tsx",
|
||||
"src/components/button/ButtonShiftHover/ButtonShiftHover.tsx",
|
||||
"src/components/button/ButtonElasticEffect/ButtonElasticEffect.tsx",
|
||||
"src/components/button/ButtonTextShift/ButtonTextShift.tsx",
|
||||
"src/components/button/ButtonTextUnderline.tsx",
|
||||
"src/components/button/ButtonIconArrow.tsx"
|
||||
],
|
||||
"can_modify_directly": true,
|
||||
@@ -3302,8 +3302,8 @@
|
||||
"button"
|
||||
],
|
||||
"used_in": [
|
||||
"src/components/button/Button.tsx",
|
||||
"src/components/navbar/NavbarLayoutFloatingInline.tsx"
|
||||
"src/components/navbar/NavbarLayoutFloatingInline.tsx",
|
||||
"src/components/button/Button.tsx"
|
||||
],
|
||||
"can_modify_directly": true,
|
||||
"can_delete": true,
|
||||
|
||||
@@ -1,4 +1,29 @@
|
||||
import type { 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>
|
||||
);
|
||||
}
|
||||
import { Cormorant_Garamond } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
||||
|
||||
Reference in New Issue
Block a user