website/_components/header.tsx

26 lines
672 B
TypeScript
Raw Normal View History

2023-07-26 16:34:06 -04:00
export interface Props {
title: string;
description?: string;
author?: {
name: string;
};
date: Date;
2023-07-26 22:02:15 -04:00
comp: any;
2023-07-26 16:34:06 -04:00
}
export default function(props: Props) {
const dateFormatted = Intl.DateTimeFormat("en-CA", { dateStyle: "long" }).format(props.date);
2023-07-26 16:34:06 -04:00
return (
<header className="page-header">
<h1>{ props.title }</h1>
{props.author &&
2023-12-03 11:18:36 -05:00
<p className="author" style={{ color: "var(--color-brown)" }}>
2023-08-05 20:15:33 -04:00
By {props.author.name} on <time dateTime={props.date.toISOString()}>{dateFormatted}</time>
</p>
}
<p className="subheading">{ props.description }</p>
2023-08-08 18:48:38 -04:00
{props.comp.separator()}
2023-07-26 16:34:06 -04:00
</header>
)
}