60 lines
2.1 KiB
TypeScript
60 lines
2.1 KiB
TypeScript
import Image from "next/image"
|
|
import classNames from "classnames"
|
|
|
|
import { absoluteURL } from "lib/utils/absolute-url"
|
|
import { Links } from "components/links"
|
|
import { FormattedText } from "components/formatted-text"
|
|
import { ParagraphProps } from "components/paragraph"
|
|
import { Section } from "components/section"
|
|
|
|
export function ParagraphFeature({ paragraph, ...props }: ParagraphProps) {
|
|
return (
|
|
<Section
|
|
data-cy="paragraph-feature"
|
|
backgroundColor={
|
|
paragraph.field_background_color === "muted" && "bg-gray-50"
|
|
}
|
|
{...props}
|
|
>
|
|
<div className="container px-6 mx-auto">
|
|
<div className="grid items-center gap-8 md:grid-flow-col-dense md:grid-cols-2 md:gap-12">
|
|
{paragraph.field_media?.field_media_image && (
|
|
<div
|
|
className={classNames(
|
|
paragraph.field_media_position === "left"
|
|
? "md:col-start-1"
|
|
: "md:col-start-2"
|
|
)}
|
|
>
|
|
<Image
|
|
src={absoluteURL(
|
|
paragraph.field_media.field_media_image.uri.url
|
|
)}
|
|
alt={
|
|
paragraph.field_media.field_media_image.resourceIdObjMeta.alt
|
|
}
|
|
width={500}
|
|
height={300}
|
|
layout="responsive"
|
|
objectFit="cover"
|
|
className="rounded-lg"
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className="flex flex-col items-center text-center md:items-start md:text-left">
|
|
{paragraph.field_heading && (
|
|
<h2 className="text-3xl font-black sm:text-4xl lg:text-5xl">
|
|
{paragraph.field_heading}
|
|
</h2>
|
|
)}
|
|
<FormattedText
|
|
className="max-w-md mt-4 text-lg font-light leading-relaxed text-gray-500 sm:text-xl lg:text-2xl"
|
|
processed={paragraph.field_text.processed}
|
|
/>
|
|
{paragraph.field_link && <Links links={[paragraph.field_link]} />}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Section>
|
|
)
|
|
}
|