diff --git a/src/blocks/FDHeroBlock/Component.tsx b/src/blocks/FDHeroBlock/Component.tsx index 4163ed3..b65e9ca 100644 --- a/src/blocks/FDHeroBlock/Component.tsx +++ b/src/blocks/FDHeroBlock/Component.tsx @@ -3,6 +3,14 @@ import type { FDHeroBlock as FDHeroBlockProps, Media } from '@/payload-types' import { FDButton } from '@/components/FDButton' import { FDImage } from '@/components/FDImage' +const minHeightMap: Record = { + auto: '', + sm: '400px', + md: '560px', + lg: '720px', + screen: '100vh', +} + export const FDHeroBlockComponent: React.FC = ({ heading, subheading, @@ -12,8 +20,10 @@ export const FDHeroBlockComponent: React.FC = ({ secondaryCtaText, secondaryCtaLink = '#', backgroundImage, + minHeight = 'auto', overlayOpacity = '50', - textColor = 'auto', + headingColor: headingColorProp = 'auto', + bodyColor: bodyColorProp = 'auto', theme = 'light', anchorId, }) => { @@ -21,29 +31,36 @@ export const FDHeroBlockComponent: React.FC = ({ const hasBgImage = Boolean(media?.url) const isDark = hasBgImage || theme === 'dark' - let headingColor: string - let textBodyColor: string - if (textColor === 'white') { - headingColor = 'text-white' - textBodyColor = 'text-white' - } else if (textColor === 'navy') { - headingColor = 'text-fd-navy' - textBodyColor = 'text-fd-navy' - } else { - headingColor = isDark ? 'text-fd-yellow' : 'text-fd-navy dark:text-fd-yellow' - textBodyColor = isDark ? 'text-white' : 'text-fd-navy dark:text-white' + const headingColorMap: Record = { + auto: isDark ? 'text-fd-yellow' : 'text-fd-navy dark:text-fd-yellow', + yellow: 'text-fd-yellow', + white: 'text-white', + navy: 'text-fd-navy', } + const bodyColorMap: Record = { + auto: isDark ? 'text-white' : 'text-fd-navy dark:text-white', + white: 'text-white', + navy: 'text-fd-navy', + yellow: 'text-fd-yellow', + } + + const headingColor = headingColorMap[headingColorProp || 'auto'] + const textBodyColor = bodyColorMap[bodyColorProp || 'auto'] + const overlayClass = overlayOpacity === '30' ? 'bg-black/30' : overlayOpacity === '70' ? 'bg-black/70' : 'bg-black/50' - const secondaryOnDark = textColor === 'navy' ? false : isDark + const secondaryOnDark = isDark + + const minHeightStyle = minHeightMap[minHeight || 'auto'] return (
{/* Priority #2: Use FDImage instead of raw for Next.js optimization */} {hasBgImage && media && ( diff --git a/src/blocks/FDHeroBlock/config.ts b/src/blocks/FDHeroBlock/config.ts index 23c21bb..7e8887e 100644 --- a/src/blocks/FDHeroBlock/config.ts +++ b/src/blocks/FDHeroBlock/config.ts @@ -71,6 +71,23 @@ export const FDHeroBlock: Block = { description: 'Fullbreddsbild bakom texten. Lämna tom för enfärgad bakgrund.', }, }, + { + name: 'minHeight', + type: 'select', + label: 'Minsta höjd', + defaultValue: 'auto', + admin: { + condition: (_, siblingData) => Boolean(siblingData?.backgroundImage), + description: 'Kontrollerar sektionens minsta höjd när bakgrundsbild används', + }, + options: [ + { label: 'Auto (baserat på innehåll)', value: 'auto' }, + { label: 'Liten (400px)', value: 'sm' }, + { label: 'Medium (560px)', value: 'md' }, + { label: 'Stor (720px)', value: 'lg' }, + { label: 'Helskärm (100vh)', value: 'screen' }, + ], + }, { name: 'overlayOpacity', type: 'select', @@ -87,14 +104,27 @@ export const FDHeroBlock: Block = { ], }, { - name: 'textColor', + name: 'headingColor', type: 'select', - label: 'Textfärg', + label: 'Rubrikfärg', defaultValue: 'auto', options: [ - { label: 'Automatisk (baserat på tema)', value: 'auto' }, + { label: 'Automatisk (gul på mörkt, navy på ljust)', value: 'auto' }, + { label: 'Gul', value: 'yellow' }, { label: 'Vit', value: 'white' }, - { label: 'Blå (navy)', value: 'navy' }, + { label: 'Navy', value: 'navy' }, + ], + }, + { + name: 'bodyColor', + type: 'select', + label: 'Brödtextfärg', + defaultValue: 'auto', + options: [ + { label: 'Automatisk (vit på mörkt, navy på ljust)', value: 'auto' }, + { label: 'Vit', value: 'white' }, + { label: 'Navy', value: 'navy' }, + { label: 'Gul', value: 'yellow' }, ], }, {