diff --git a/frontend/src/components/Constructor/ElementEditorPanel.tsx b/frontend/src/components/Constructor/ElementEditorPanel.tsx index c7a18fc..ff0e3d2 100644 --- a/frontend/src/components/Constructor/ElementEditorPanel.tsx +++ b/frontend/src/components/Constructor/ElementEditorPanel.tsx @@ -495,6 +495,9 @@ export function ElementEditorPanel({ galleryHeaderImageUrl={ selectedElement.galleryHeaderImageUrl || '' } + galleryHeaderText={ + selectedElement.galleryHeaderText || '' + } galleryTitle={selectedElement.galleryTitle || ''} galleryInfoSpans={ selectedElement.galleryInfoSpans || [] diff --git a/frontend/src/components/ElementSettings/GallerySettingsSectionCompact.tsx b/frontend/src/components/ElementSettings/GallerySettingsSectionCompact.tsx index b8a258f..258ade9 100644 --- a/frontend/src/components/ElementSettings/GallerySettingsSectionCompact.tsx +++ b/frontend/src/components/ElementSettings/GallerySettingsSectionCompact.tsx @@ -17,6 +17,7 @@ import { FONT_OPTIONS } from '../../lib/fonts'; interface GallerySettingsSectionCompactProps { // Header settings galleryHeaderImageUrl: string; + galleryHeaderText: string; galleryTitle: string; galleryInfoSpans: GalleryInfoSpan[]; galleryColumns: number; @@ -29,6 +30,7 @@ interface GallerySettingsSectionCompactProps { // Header handlers onUpdateHeader: (patch: { galleryHeaderImageUrl?: string; + galleryHeaderText?: string; galleryTitle?: string; galleryColumns?: number; galleryTitleFontFamily?: string; @@ -47,6 +49,7 @@ const GallerySettingsSectionCompact: React.FC< GallerySettingsSectionCompactProps > = ({ galleryHeaderImageUrl, + galleryHeaderText, galleryTitle, galleryInfoSpans, galleryColumns, @@ -87,6 +90,15 @@ const GallerySettingsSectionCompact: React.FC< ))} + + onUpdateHeader({ galleryHeaderText: event.target.value }) + } + /> + = ({ const cards: GalleryCard[] = element.galleryCards || []; const infoSpans: GalleryInfoSpan[] = element.galleryInfoSpans || []; const headerImageUrl = element.galleryHeaderImageUrl; + const headerText = element.galleryHeaderText; const title = element.galleryTitle; const columns = element.galleryColumns || 3; @@ -61,8 +62,8 @@ const GalleryElement: React.FC = ({ className='flex flex-col gap-2 p-3 rounded-xl min-w-[200px] backdrop-blur-sm' style={{ backgroundColor: backgroundColor || 'rgba(0, 0, 0, 0.6)' }} > - {/* Header image */} - {headerImageUrl && ( + {/* Header: image takes priority, otherwise render text */} + {headerImageUrl ? ( // eslint-disable-next-line @next/next/no-img-element = ({ className='w-full h-auto object-cover rounded-lg' draggable={false} /> - )} + ) : headerText ? ( +
+ {headerText} +
+ ) : null} {/* Title */} {title && ( diff --git a/frontend/src/types/constructor.ts b/frontend/src/types/constructor.ts index 2a9686f..238815c 100644 --- a/frontend/src/types/constructor.ts +++ b/frontend/src/types/constructor.ts @@ -94,6 +94,7 @@ export interface CanvasElement extends BaseCanvasElement { galleryCards?: GalleryCard[]; // Gallery header settings galleryHeaderImageUrl?: string; + galleryHeaderText?: string; galleryTitle?: string; galleryInfoSpans?: GalleryInfoSpan[]; galleryColumns?: number;