@akinon/next 2.0.0-beta.20 → 2.0.0-beta.22

package/components/theme-editor/sections/before-after-section.tsx

@@ -1,245 +0,0 @@
-'use client';
-
-import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { getResponsiveValue, resolveThemeCssVariables } from '../utils';
-import { Section } from '../theme-section';
-import { useThemeSettingsContext } from '../theme-settings-context';
-import { twMerge } from 'tailwind-merge';
-import clsx from 'clsx';
-import ThemeBlock from '../theme-block';
-
-interface BeforeAfterSectionProps {
-  section: Section;
-  currentBreakpoint?: string;
-  isDesigner?: boolean;
-  placeholderId?: string;
-  selectedBlockId?: string | null;
-}
-
-export default function BeforeAfterSection({
-  section,
-  currentBreakpoint = 'desktop',
-  isDesigner = false,
-  placeholderId = '',
-  selectedBlockId = null
-}: BeforeAfterSectionProps) {
-  const themeSettings = useThemeSettingsContext();
-  const [sliderPosition, setSliderPosition] = useState(50);
-  const [isResizing, setIsResizing] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [containerWidth, setContainerWidth] = useState(0);
-
-  const styles = section.styles || {};
-  const properties = section.properties || {};
-
-  const beforeBlock = section.blocks?.find(b => b.label === 'Before Image');
-  const afterBlock = section.blocks?.find(b => b.label === 'After Image');
-
-  const height = getResponsiveValue(styles.height, currentBreakpoint, '500px') as string | number;
-  const width = getResponsiveValue(styles.width, currentBreakpoint, '100%') as string;
-  const maxWidth = getResponsiveValue(styles['max-width'], currentBreakpoint, 'normal') as string;
-  
-  const sliderColor = resolveThemeCssVariables(
-    getResponsiveValue(styles['slider-color'], currentBreakpoint, '#ffffff') as string,
-    themeSettings
-  );
-
-  const renderBlock = (block: any) => {
-      return (
-          <ThemeBlock
-            key={block.id}
-            block={block}
-            placeholderId={placeholderId}
-            sectionId={section.id}
-            isDesigner={isDesigner}
-            isSelected={selectedBlockId === block.id}
-            selectedBlockId={selectedBlockId}
-            currentBreakpoint={currentBreakpoint}
-            onMoveUp={() => {
-                if (window.parent) window.parent.postMessage({ type: 'MOVE_BLOCK_UP', data: { placeholderId, sectionId: section.id, blockId: block.id } }, '*');
-            }}
-            onMoveDown={() => {
-                if (window.parent) window.parent.postMessage({ type: 'MOVE_BLOCK_DOWN', data: { placeholderId, sectionId: section.id, blockId: block.id } }, '*');
-            }}
-            onDuplicate={() => {
-                if (window.parent) window.parent.postMessage({ type: 'DUPLICATE_BLOCK', data: { placeholderId, sectionId: section.id, blockId: block.id } }, '*');
-            }}
-            onToggleVisibility={() => {
-                if (window.parent) window.parent.postMessage({ type: 'TOGGLE_BLOCK_VISIBILITY', data: { placeholderId, sectionId: section.id, blockId: block.id } }, '*');
-            }}
-            onDelete={() => {
-                if (window.parent) window.parent.postMessage({ type: 'DELETE_BLOCK', data: { placeholderId, sectionId: section.id, blockId: block.id } }, '*');
-            }}
-            onRename={(newLabel) => {
-                if (window.parent) window.parent.postMessage({ type: 'RENAME_BLOCK', data: { placeholderId, sectionId: section.id, blockId: block.id, label: newLabel } }, '*');
-            }}
-          />
-      );
-  };
-
-  useEffect(() => {
-    if (!containerRef.current) return;
-    
-    setContainerWidth(containerRef.current.offsetWidth);
-
-    const observer = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        setContainerWidth(entry.contentRect.width);
-      }
-    });
-    
-    observer.observe(containerRef.current);
-    
-    return () => observer.disconnect();
-  }, []);
-
-  const handleStart = (clientX: number) => {
-      setIsResizing(true);
-      if (containerRef.current) {
-        const rect = containerRef.current.getBoundingClientRect();
-        const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
-        setSliderPosition((x / rect.width) * 100);
-      }
-  };
-
-  const handleMouseDown = (e: React.MouseEvent) => handleStart(e.clientX);
-  const handleTouchStart = (e: React.TouchEvent) => handleStart(e.touches[0].clientX);
-
-  const handleMove = useCallback(
-    (clientX: number) => {
-      if (!isResizing || !containerRef.current) return;
-      
-      const rect = containerRef.current.getBoundingClientRect();
-      const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
-      const percentage = (x / rect.width) * 100;
-      
-      setSliderPosition(percentage);
-    },
-    [isResizing]
-  );
-
-  const handleMouseMove = (e: React.MouseEvent) => {
-    if (isResizing) handleMove(e.clientX);
-  };
-  
-  const handleTouchMove = (e: React.TouchEvent) => {
-    if (isResizing) handleMove(e.touches[0].clientX);
-  };
-  
-  useEffect(() => {
-    const handleGlobalEnd = () => setIsResizing(false);
-    const handleGlobalMove = (e: MouseEvent) => {
-        if (isResizing) {
-            e.preventDefault();
-            handleMove(e.clientX);
-        }
-    };
-    
-    const handleGlobalTouchMove = (e: TouchEvent) => {
-        if (isResizing) {
-            handleMove(e.touches[0].clientX);
-        }
-    }
-
-    if (isResizing) {
-        window.addEventListener('mouseup', handleGlobalEnd);
-        window.addEventListener('touchend', handleGlobalEnd);
-        window.addEventListener('mousemove', handleGlobalMove);
-        window.addEventListener('touchmove', handleGlobalTouchMove, { passive: false });
-    }
-
-    return () => {
-        window.removeEventListener('mouseup', handleGlobalEnd);
-        window.removeEventListener('touchend', handleGlobalEnd);
-        window.removeEventListener('mousemove', handleGlobalMove);
-        window.removeEventListener('touchmove', handleGlobalTouchMove);
-    };
-  }, [isResizing, handleMove]);
-
-
-  const maxWidthClass =
-    maxWidth === 'narrow'
-      ? 'max-w-4xl'
-      : maxWidth === 'normal'
-      ? 'max-w-7xl'
-      : maxWidth === 'full'
-      ? 'w-full'
-      : '';
-      
-  const hasMaxWidth = maxWidth !== 'none' && maxWidth !== 'full';
-
-  return (
-    <div 
-        className={twMerge(
-            clsx(
-            'relative mx-auto select-none overflow-hidden group/before-after',
-            hasMaxWidth && 'mx-auto',
-            maxWidthClass
-            )
-        )}
-        style={{ 
-            height: typeof height === 'number' ? `${height}px` : height,
-            width: width === 'fill' ? '100%' : width,
-            maxWidth: maxWidth === 'none' ? 'none' : undefined
-        }}
-        ref={containerRef}
-        onMouseDown={handleMouseDown}
-        onTouchStart={handleTouchStart}
-        onMouseMove={handleMouseMove}
-        onTouchMove={handleTouchMove}
-    >
-        <div className="absolute inset-0 w-full h-full">
-            {afterBlock ? (
-                <div className="w-full h-full pointer-events-none">
-                    {renderBlock(afterBlock)}
-                </div>
-            ) : (
-                <div className="w-full h-full bg-gray-200 flex items-center justify-center text-gray-400 select-none pointer-events-none">
-                    No After Image
-                </div>
-            )}
-        </div>
-
-        <div 
-            className="absolute top-0 left-0 h-full overflow-hidden border-r"
-            style={{ 
-                width: `${sliderPosition}%`,
-                borderColor: sliderColor
-            }}
-        >
-            <div 
-                className="relative h-full" 
-                style={{ width: containerWidth ? `${containerWidth}px` : '100%' }}
-            >
-                 {beforeBlock ? (
-                     <div className="absolute top-0 left-0 w-full h-full pointer-events-none">
-                        {renderBlock(beforeBlock)}
-                     </div>
-                 ) : (
-                    <div className="absolute top-0 left-0 w-full h-full bg-gray-300 flex items-center justify-center text-gray-500 select-none pointer-events-none">
-                        No Before Image
-                    </div>
-                 )}
-            </div>
-        </div>
-
-        <div 
-            className={clsx(
-                "absolute top-0 bottom-0 w-1 z-20 cursor-ew-resize"
-            )}
-            style={{ 
-                left: `${sliderPosition}%`, 
-                backgroundColor: sliderColor,
-                transform: 'translateX(-50%)'
-            }}
-        >
-            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-8 bg-white rounded-full shadow-lg flex items-center justify-center text-gray-800 pointer-events-none">
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                    <path d="M10 15l-3-3 3-3" />
-                    <path d="M14 15l3-3-3-3" />
-                </svg>
-            </div>
-        </div>
-    </div>
-  );
-}