www-new/components/OrganizedContent/Header.tsx

39 lines
839 B
TypeScript

import React, { ReactNode } from "react";
import { Image } from "@/components/Image";
import styles from "./Header.module.css";
export interface Props {
title: string;
image: string;
children: ReactNode;
description?: string;
imagePosition?: "left" | "right";
}
export function Header({
title,
image,
children,
description,
imagePosition,
}: Props) {
return (
<main className={styles.page}>
<header
className={`${styles.headerContainer} ${
imagePosition === "right" ? styles.imageRight : ""
}`}
>
<Image src={image} className={styles.headerImage} />
<div>
<h1 className={styles.header}>{title}</h1>
{description && <p className={styles.description}>{description}</p>}
</div>
</header>
{children}
</main>
);
}