66 lines
1.7 KiB
TypeScript
66 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import Image from 'next/image';
|
|
|
|
export interface ContentSectionProps {
|
|
eyebrow?: React.ReactNode;
|
|
heading?: React.ReactNode;
|
|
body?: React.ReactNode;
|
|
imageUrl?: string;
|
|
imageAlt?: string;
|
|
}
|
|
|
|
const ContentSection: React.FC<ContentSectionProps> = ({
|
|
eyebrow,
|
|
heading,
|
|
body,
|
|
imageUrl,
|
|
imageAlt,
|
|
}) => {
|
|
return (
|
|
<section className="bg-background py-20">
|
|
<div className="max-w-screen-2xl mx-auto px-8">
|
|
<div className="max-w-2xl mx-auto">
|
|
{eyebrow && (
|
|
<p className="text-[11px] font-mono uppercase tracking-widest text-muted-foreground">
|
|
{eyebrow}
|
|
</p>
|
|
)}
|
|
|
|
{heading && (
|
|
<h1 className="mt-3 text-3xl md:text-4xl font-normal text-foreground">
|
|
{heading}
|
|
</h1>
|
|
)}
|
|
|
|
{imageUrl && (
|
|
<div className="relative mt-10 aspect-[3/2] overflow-hidden">
|
|
<Image
|
|
src={imageUrl}
|
|
alt={imageAlt || (typeof heading === 'string' ? heading : '')}
|
|
fill
|
|
sizes="(min-width: 768px) 42rem, 100vw"
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{body && (
|
|
<div className="mt-8 flex flex-col gap-4 text-[15px] leading-7 text-foreground">
|
|
{typeof body === 'string'
|
|
? body
|
|
.split(/\n{2,}/)
|
|
.filter((paragraph) => paragraph.trim())
|
|
.map((paragraph, index) => <p key={index}>{paragraph}</p>)
|
|
: body}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default ContentSection;
|