28 lines
835 B
TypeScript
28 lines
835 B
TypeScript
import Image from "next/image"
|
|
import type { ReactNode } from "react"
|
|
|
|
export function FeatureSplit({
|
|
children,
|
|
image,
|
|
alt,
|
|
reverse = false,
|
|
}: {
|
|
children: ReactNode
|
|
image: string
|
|
alt: string
|
|
reverse?: boolean
|
|
}) {
|
|
return (
|
|
<div className="grid wedding-lg:grid-cols-2">
|
|
<div
|
|
className={`flex items-center bg-wedding-ivory px-wedding-gutter-mobile py-wedding-section wedding-md:px-wedding-gutter-phone wedding-lg:px-wedding-gutter-desktop ${reverse ? "wedding-lg:order-2" : ""}`}
|
|
>
|
|
<div className="wedding-lg:mx-auto w-full max-w-md">{children}</div>
|
|
</div>
|
|
<div className={`relative min-h-96 ${reverse ? "wedding-lg:order-1" : ""}`}>
|
|
<Image className="object-cover" src={image} alt={alt} fill sizes="(min-width: 900px) 60vw, 100vw" />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|