export default function (
{ title, description, children, comp, metas, links, author, date }: Lume.Data,
) {
return (
<html lang="en-CA">
<head>
<title>{title}</title>
<meta charSet="utf-8" />
<meta name="description" content={description} />
<meta name="author" content="Foster Hangdaan" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="dark light" />
<meta
name="theme-color"
media="(prefers-color-scheme: dark)"
content="#1a1b26"
/>
<meta
name="theme-color"
media="(prefers-color-scheme: light)"
content="#d5d6db"
/>
{Array.isArray(metas) && metas.length > 0 &&
metas.map((m, index) => (
<meta key={index} name={m.name} content={m.content} />
))}
<link rel="stylesheet" href="/styles/main.css" />
<link
rel="icon"
type="image/png"
href="/icons/tabicon-16.png"
sizes="16x16"
/>
<link
rel="icon"
type="image/png"
href="/icons/tabicon-32.png"
sizes="32x32"
/>
<link
rel="icon"
type="image/png"
href="/icons/tabicon-96.png"
sizes="96x96"
/>
<link
rel="icon"
type="image/png"
href="/icons/tabicon-128.png"
sizes="128x128"
/>
<link
rel="icon"
type="image/png"
href="/icons/tabicon-196.png"
sizes="196x196"
/>
{Array.isArray(links) && links.length > 0 &&
links.map((l, index) => (
<link
key={index}
rel={l.rel}
href={l.href}
type={l.type}
title={l.title}
/>
))}
</head>
<body>
{comp.navbar()}
{comp.header({ title, description, author, date })}
<main className="main-content">{children}</main>
{comp.footer()}
</body>
</html>
);
}