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

package/components/theme-editor/sections/notification-banner-section.tsx

@@ -1,173 +0,0 @@
-'use client';
-
-import React, { useState } 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 NotificationBannerSectionProps {
-  section: Section;
-  currentBreakpoint?: string;
-  isDesigner?: boolean;
-  placeholderId?: string;
-  selectedBlockId?: string | null;
-}
-
-export default function NotificationBannerSection({
-  section,
-  currentBreakpoint = 'desktop',
-  isDesigner = false,
-  placeholderId = '',
-  selectedBlockId = null
-}: NotificationBannerSectionProps) {
-  const themeSettings = useThemeSettingsContext();
-  const [isDismissed, setIsDismissed] = useState(false);
-
-  const styles = section.styles || {};
-  const properties = section.properties || {};
-
-  const gradientStart = resolveThemeCssVariables(
-    getResponsiveValue(styles['background-gradient-start'], currentBreakpoint, '#a8e063') as string,
-    themeSettings
-  );
-  const gradientEnd = resolveThemeCssVariables(
-    getResponsiveValue(styles['background-gradient-end'], currentBreakpoint, '#d4fc79') as string,
-    themeSettings
-  );
-  const borderRadius = getResponsiveValue(styles['border-radius'], currentBreakpoint, '16px') as string;
-  const paddingTop = getResponsiveValue(styles['padding-top'], currentBreakpoint, 20);
-  const paddingRight = getResponsiveValue(styles['padding-right'], currentBreakpoint, 24);
-  const paddingBottom = getResponsiveValue(styles['padding-bottom'], currentBreakpoint, 20);
-  const paddingLeft = getResponsiveValue(styles['padding-left'], currentBreakpoint, 24);
-  const gap = getResponsiveValue(styles.gap, currentBreakpoint, 16);
-  const maxWidth = getResponsiveValue(styles['max-width'], currentBreakpoint, 'normal') as string;
-  const closeButtonColor = resolveThemeCssVariables(
-    getResponsiveValue(styles['close-button-color'], currentBreakpoint, '#33691e') as string,
-    themeSettings
-  );
-  const iconBgColor = resolveThemeCssVariables(
-    getResponsiveValue(styles['icon-background-color'], currentBreakpoint, '#ffffff40') as string,
-    themeSettings
-  );
-
-  const dismissible = getResponsiveValue(properties.dismissible, currentBreakpoint, true);
-
-  const maxWidthClass =
-    maxWidth === 'narrow'
-      ? 'max-w-4xl'
-      : maxWidth === 'normal'
-      ? 'max-w-7xl'
-      : maxWidth === 'full'
-      ? 'w-full'
-      : '';
-
-  const hasMaxWidth = maxWidth !== 'none' && maxWidth !== 'full';
-
-  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 } }, '*');
-        }}
-      />
-    );
-  };
-
-  if (isDismissed && !isDesigner) {
-    return null;
-  }
-
-  const iconBlock = section.blocks?.find(b => b.type === 'icon');
-  const contentBlocks = section.blocks?.filter(b => b.type !== 'icon') || [];
-
-  return (
-    <div
-      className={twMerge(
-        clsx(
-          'relative flex items-center transition-all duration-300',
-          hasMaxWidth && 'mx-auto',
-          maxWidthClass,
-          isDismissed && isDesigner && 'opacity-50'
-        )
-      )}
-      style={{
-        background: `linear-gradient(135deg, ${gradientStart} 0%, ${gradientEnd} 100%)`,
-        borderRadius,
-        paddingTop: typeof paddingTop === 'number' ? `${paddingTop}px` : paddingTop as string,
-        paddingRight: typeof paddingRight === 'number' ? `${paddingRight}px` : paddingRight as string,
-        paddingBottom: typeof paddingBottom === 'number' ? `${paddingBottom}px` : paddingBottom as string,
-        paddingLeft: typeof paddingLeft === 'number' ? `${paddingLeft}px` : paddingLeft as string,
-        gap: typeof gap === 'number' ? `${gap}px` : gap as string
-      }}
-    >
-      {iconBlock && (
-        <div
-          className="shrink-0 rounded-xl flex items-center justify-center"
-          style={{
-            backgroundColor: iconBgColor,
-            width: '56px',
-            height: '56px'
-          }}
-        >
-          {renderBlock(iconBlock)}
-        </div>
-      )}
-
-      <div className="flex-1 min-w-0">
-        {contentBlocks.map(block => renderBlock(block))}
-      </div>
-
-      {Boolean(dismissible) && (
-        <button
-          onClick={() => setIsDismissed(true)}
-          className={clsx(
-            'shrink-0 flex items-center justify-center rounded-full transition-colors duration-200',
-            'hover:bg-white/30 w-8 h-8'
-          )}
-          style={{ color: closeButtonColor }}
-          aria-label="Dismiss notification"
-        >
-          <svg
-            width="18"
-            height="18"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          >
-            <path d="M18 6L6 18" />
-            <path d="M6 6l12 12" />
-          </svg>
-        </button>
-      )}
-    </div>
-  );
-}