96 lines
2.9 KiB
TypeScript
96 lines
2.9 KiB
TypeScript
/**
|
|
* Manifesto Content Component
|
|
*
|
|
* Long-form reading experience with manifesto text.
|
|
* Renders paragraphs with proper typography for optimal reading.
|
|
*/
|
|
|
|
import type { ManifestoSection } from '@/content/schemas/manifesto'
|
|
import { InsightBox } from './insight-box'
|
|
import { StatementSection } from './statement-section'
|
|
|
|
interface ManifestoContentProps {
|
|
sections: ManifestoSection[]
|
|
}
|
|
|
|
export function ManifestoContent({ sections }: ManifestoContentProps) {
|
|
// Group consecutive non-statement sections into article blocks
|
|
const blocks: Array<{ start: number; end: number }> = []
|
|
let blockStart = 0
|
|
|
|
sections.forEach((section, index) => {
|
|
if (section.type === 'statement') {
|
|
if (blockStart < index) {
|
|
blocks.push({ start: blockStart, end: index - 1 })
|
|
}
|
|
blockStart = index + 1
|
|
}
|
|
})
|
|
|
|
// Add final block if needed
|
|
if (blockStart < sections.length) {
|
|
blocks.push({ start: blockStart, end: sections.length - 1 })
|
|
}
|
|
|
|
let blockIndex = 0
|
|
|
|
return (
|
|
<>
|
|
{sections.map((section, index) => {
|
|
// Statement sections are full-width
|
|
if (section.type === 'statement') {
|
|
return <StatementSection key={section.id} section={section} />
|
|
}
|
|
|
|
// Check if this is the start of a new article block
|
|
const currentBlock = blocks[blockIndex]
|
|
const isBlockStart = currentBlock && index === currentBlock.start
|
|
|
|
if (isBlockStart) {
|
|
const blockSections = sections.slice(currentBlock.start, currentBlock.end + 1)
|
|
blockIndex++
|
|
|
|
return (
|
|
<article
|
|
key={`block-${currentBlock.start}`}
|
|
className="w-full md:max-w-[750px] mx-auto px-4 py-6 md:px-16 md:py-16 bg-white"
|
|
>
|
|
<div className="prose prose-lg max-w-none">
|
|
{blockSections.map((blockSection) => {
|
|
if (blockSection.type === 'paragraph') {
|
|
return (
|
|
<p
|
|
key={blockSection.id}
|
|
className="font-serif text-slate-900 mb-4 md:mb-6"
|
|
style={{
|
|
fontSize: 'clamp(1.125rem, 2vw, 1.25rem)',
|
|
lineHeight: 'var(--line-height-relaxed)',
|
|
}}
|
|
>
|
|
{blockSection.content}
|
|
</p>
|
|
)
|
|
}
|
|
|
|
if (blockSection.type === 'insight') {
|
|
return (
|
|
<InsightBox key={blockSection.id}>
|
|
{blockSection.content}
|
|
</InsightBox>
|
|
)
|
|
}
|
|
|
|
return null
|
|
})}
|
|
</div>
|
|
</article>
|
|
)
|
|
}
|
|
|
|
return null
|
|
})}
|
|
</>
|
|
)
|
|
}
|
|
|