2021-08-23 09:27:59 -04:00
|
|
|
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;
|
2021-08-25 15:12:09 -04:00
|
|
|
description?: string;
|
|
|
|
imagePosition?: "left" | "right";
|
2021-08-23 09:27:59 -04:00
|
|
|
}
|
|
|
|
|
2021-08-25 15:12:09 -04:00
|
|
|
export function Header({
|
|
|
|
title,
|
|
|
|
image,
|
|
|
|
children,
|
|
|
|
description,
|
|
|
|
imagePosition,
|
|
|
|
}: Props) {
|
2021-08-23 09:27:59 -04:00
|
|
|
return (
|
|
|
|
<main className={styles.page}>
|
2021-08-25 15:12:09 -04:00
|
|
|
<header
|
|
|
|
className={`${styles.headerContainer} ${
|
|
|
|
imagePosition === "right" ? styles.imageRight : ""
|
|
|
|
}`}
|
|
|
|
>
|
2021-08-23 09:27:59 -04:00
|
|
|
<Image src={image} className={styles.headerImage} />
|
2021-08-25 15:12:09 -04:00
|
|
|
<div>
|
|
|
|
<h1 className={styles.header}>{title}</h1>
|
|
|
|
{description && <p className={styles.description}>{description}</p>}
|
|
|
|
</div>
|
2021-08-23 09:27:59 -04:00
|
|
|
</header>
|
|
|
|
{children}
|
|
|
|
</main>
|
|
|
|
);
|
|
|
|
}
|