app/layout.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

import React, { ReactNode } from 'react';

import 'victormono'
import '~/styles/layout.css'
import '~/styles/text.css'

import Image from 'components/Image'
import Header from '~/components/layout/Header'
import Footer from '~/components/layout/Footer'

const header = 'images/aurora-1197753.jpg'

export default function SiteLayout({ children }: { children: ReactNode }) {
  const headerImage = (
    <Image
      src={header}
      alt=""
      role="presentation"
      width={[2560,1920,1280,800,600]}
      sizes={`
        (max-width: 2560) 100vw,
        (max-width: 1920) 100vw,
        (max-width: 1280) 100vw,
        (max-width: 800) 100vw,
        (max-width: 600) 100vw,
      `}
    />
  )

  return (
    <html>
      <head>
        <title>tempest.dev</title>
      </head>
      <body>
        <Header headerImage={headerImage} />
        {children}
        <Footer />
      </body>
    </html>
  )
}