publisher-tools/frontend/app/root.tsx at 597a662e2858b5b5debdd4aefd3841786c41b6ef · interledger/publisher-tools · 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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
import type { ReactNode } from 'react'
import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
  useRouteError,
  useLocation,
  isRouteErrorResponse,
  type LinksFunction,
  type MetaFunction,
} from 'react-router'
import { Header, Footer } from '@/components'
import { UMAMI_HOST, UMAMI_WEBSITE_ID } from '@shared/defines'
import { TOOLS } from '@shared/types'
import faviconSvg from '~/assets/images/favicon.svg?url'
import { TelemetryProvider } from '~/lib/umami'
import { UIProvider } from '~/stores/uiStore'
import stylesheet from '~/tailwind.css?url'
import { XCircle } from './components/icons.js'
import { Button } from './components/index.js'

export default function App() {
  const { pathname } = useLocation()
  const tool = TOOLS.find((t) => pathname.startsWith(`/${t}`))

  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
        {UMAMI_HOST && UMAMI_WEBSITE_ID && (
          <script
            defer
            src={`${UMAMI_HOST}/script.js`}
            data-website-id={UMAMI_WEBSITE_ID}
          />
        )}
      </head>
      <body className="h-screen bg-interface-bg-main flex flex-col">
        <UIProvider>
          <Header />
          <main className="flex-grow flex flex-col">
            <TelemetryProvider tool={tool}>
              <Outlet />
            </TelemetryProvider>
          </main>
          <Footer />
        </UIProvider>
        <ScrollRestoration />
        <Scripts crossOrigin="" />
      </body>
    </html>
  )
}

export function ErrorBoundary() {
  const error = useRouteError()

  if (isRouteErrorResponse(error)) {
    return (
      <ErrorPage>
        <div className="flex items-center justify-center flex-col bg-white p-10 rounded-md-old shadow-md space-y-2">
          <h4 className="font-semibold text-xl -tracking-widest text-[#F37F64]">
            {error.status}
          </h4>
          <h2 className="text-xl">{error.statusText}</h2>
          <Button to="/" aria-label="go to homepage">
            Go to homepage
          </Button>
        </div>
      </ErrorPage>
    )
  }

  let errorMessage = 'Unknown error'
  if (error instanceof Error) {
    errorMessage = error.message
  }

  return (
    <ErrorPage>
      <div className="flex items-center justify-center flex-col bg-white p-10 rounded-md-old shadow-md space-y-5">
        <div className="grid place-items-center">
          <XCircle className="w-10 h-10 text-red-500" />
          <p className="text-lg font-semibold">
            There was an issue with your request.
          </p>
        </div>
        <div>
          <span className="font-light">Cause:</span> <span>{errorMessage}</span>
        </div>
        <Button to={'/'} aria-label="go to homepage">
          Go to homepage
        </Button>
      </div>
    </ErrorPage>
  )
}

const ErrorPage = ({ children }: { children: ReactNode }) => {
  return (
    <html lang="en" className="h-full">
      <head>
        <Meta />
        <Links />
      </head>
      <body className="h-full text-tealish">
        <div className="min-h-full">
          <div className="flex pt-20 md:pt-0 flex-1 flex-col">
            <main className="grid min-h-screen place-items-center">
              {children}
            </main>
          </div>
        </div>
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  )
}

export const meta: MetaFunction = () => [
  { title: 'Publisher Tools' },
  { charset: 'utf-8' },
  { name: 'viewport', content: 'width=device-width,initial-scale=1' },
]

export const links: LinksFunction = () => [
  {
    rel: 'apple-touch-icon',
    sizes: '180x180',
    href: faviconSvg,
  },
  {
    rel: 'icon',
    href: faviconSvg,
    type: 'image/svg+xml',
  },
  { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
  {
    rel: 'preconnect',
    href: 'https://fonts.gstatic.com',
    crossOrigin: 'anonymous',
  },
  { rel: 'stylesheet', href: stylesheet },
]