@akinon/pz-theme 2.0.0-beta.21

package/src/sections/notification-banner-section.tsx

@@ -0,0 +1,173 @@
+'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>
+  );
+}