mporwoll/frontend.porwoll.de
1
0
Fork 0
mirror of https://github.com/complexcaresolutions/frontend.porwoll.de.git synced 2026-03-17 16:23:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: correct field name mismatches in ImageTextBlock and QuoteBlock

Browse source 
ImageTextBlock: read CTA from cta group (cta.text/cta.link) instead of
flat ctaLabel/ctaLink fields.

QuoteBlock: read image from "image" field (not "backgroundImage"),
support CMS style values (simple/highlighted/with-image) instead of
the non-existent "parallax" value.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
CCS Admin 2026-02-25 17:02:51 +00:00
parent d236d0e9f1
commit 6e7292aaf5
2 changed files with 60 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/blocks/ImageTextBlock.tsx
View file

@ -17,8 +17,9 @@ export function ImageTextBlock({ block }: ImageTextBlockProps) {
const imageUrl = (media?.url as string) || ''
const imageAlt = (media?.alt as string) || title
const imagePosition = (block.imagePosition as string) || 'left'
const ctaLabel = (block.ctaLabel as string) || (block.buttonText as string) || ''
const ctaLink = (block.ctaLink as string) || (block.buttonLink as string) || ''
const cta = block.cta as Record<string, unknown> | undefined
const ctaLabel = (cta?.text as string) || (block.ctaLabel as string) || ''
const ctaLink = (cta?.link as string) || (block.ctaLink as string) || ''
const backgroundColor = (block.backgroundColor as string) || 'light'
const isImageLeft = imagePosition === 'left'

56
src/components/blocks/QuoteBlock.tsx
View file

@ -1,6 +1,7 @@
'use client'
import { motion } from 'framer-motion'
import Image from 'next/image'
interface QuoteBlockProps {
block: Record<string, unknown>
@ -10,14 +11,25 @@ export function QuoteBlock({ block }: QuoteBlockProps) {
const quote = (block.quote as string) || (block.text as string) || ''
const author = (block.author as string) || (block.attribution as string) || ''
const role = (block.role as string) || ''
const backgroundMedia = block.backgroundImage as Record<string, unknown> | undefined
const backgroundUrl = backgroundMedia?.url as string | undefined
const style = (block.style as string) || (backgroundUrl ? 'parallax' : 'simple')
const media = block.image as Record<string, unknown> | undefined
const imageUrl = (media?.url as string) || ''
const imageAlt = (media?.alt as string) || author
const style = (block.style as string) || 'simple'
if (style === 'simple') {
// Style "with-image": Autor mit Bild
if (style === 'with-image' && imageUrl) {
return (
<section className="py-ws-m bg-light-bg">
<div className="max-w-3xl mx-auto px-4 text-center">
<div className="mb-6">
<Image
src={imageUrl}
alt={imageAlt}
width={80}
height={80}
className="rounded-full mx-auto object-cover"
/>
</div>
<blockquote className="text-[1.4em] leading-[1.6em] text-gray italic mb-8">
&ldquo;{quote}&rdquo;
</blockquote>
@ -36,18 +48,10 @@ export function QuoteBlock({ block }: QuoteBlockProps) {
)
}
// Style "highlighted": Hervorgehobenes Zitat mit dunklem Hintergrund
if (style === 'highlighted') {
return (
<section
className="relative bg-cover bg-center bg-fixed"
style={{
backgroundImage: backgroundUrl ? `url(${backgroundUrl})` : undefined,
backgroundColor: !backgroundUrl ? '#111' : undefined,
}}
>
{/* Overlay */}
<div className="absolute inset-0 bg-dark/50" />
{/* Content */}
<section className="relative bg-dark">
<motion.div
className="relative py-ws-m w-[90%] md:w-[55%] mx-auto text-center"
initial={{ opacity: 0, y: 30 }}
@ -78,3 +82,25 @@ export function QuoteBlock({ block }: QuoteBlockProps) {
</section>
)
}
// Default: Style "simple"
return (
<section className="py-ws-m bg-light-bg">
<div className="max-w-3xl mx-auto px-4 text-center">
<blockquote className="text-[1.4em] leading-[1.6em] text-gray italic mb-8">
&ldquo;{quote}&rdquo;
</blockquote>
<footer>
<cite className="font-heading text-[1em] tracking-[2px] uppercase text-dark not-italic block mb-2">
{author}
</cite>
{role && (
<span className="font-heading text-[0.85em] tracking-[2px] uppercase text-gray-light">
{role}
</span>
)}
</footer>
</div>
</section>
)
}