filecoin-cloud/src/components/SiteLayout.tsx at cdb9797fac4210052d813d5b51a901fec0baa2af · FilOzone/filecoin-cloud · GitHub

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
import '@/styles/globals.css'

import { setUIConfig } from '@filecoin-foundation/ui-filecoin/config/ui-config'
import { clsx } from 'clsx'
import localFont from 'next/font/local'
import Link from 'next/link'
import type { ReactNode } from 'react'

import { BreakpointDebugger } from '@/components/_BreakpointDebugger'
import { FeedbackButton } from '@/components/FeedbackButton'
import { Footer } from '@/components/Footer/Footer'
import { Providers } from '@/components/Providers'

import { BASE_DOMAIN } from '@/constants/site-metadata'

// Initialize UI config before any components render
setUIConfig({
  baseDomain: BASE_DOMAIN,
  Link: Link,
})

const funnelSans = localFont({
  src: '../fonts/Funnel_Sans/FunnelSans[wght].woff2',
  display: 'swap',
  variable: '--font-funnel-sans',
  fallback: ['Arial', 'Helvetica', 'sans-serif'],
  preload: true,
})

const aspekta = localFont({
  src: '../fonts/Aspekta/AspektaVF.woff2',
  display: 'swap',
  variable: '--font-aspekta',
  fallback: ['Arial', 'Helvetica', 'sans-serif'],
  preload: true,
})

type SiteLayoutProps = Readonly<{ children: ReactNode }>

export function SiteLayout({ children }: SiteLayoutProps) {
  return (
    <html lang="en">
      <body
        className={clsx(
          funnelSans.variable,
          aspekta.variable,
          'relative flex min-h-screen flex-col font-sans antialiased bg-zinc-950 text-zinc-50',
        )}
      >
        <Providers>
          <main className="flex-1">{children}</main>
          <Footer />
          <FeedbackButton />

          {process.env.NODE_ENV === 'development' && <BreakpointDebugger />}
        </Providers>
      </body>
    </html>
  )
}