🦴 Add viewer backbone

apps/viewer/layouts/ErrorPage.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+export const ErrorPage = ({ error }: { error: 'offline' | '500' | 'IE' }) => {
+  let errorLabel =
+    'An error occured. Please try to refresh or contact the owner of this bot.'
+  if (error === 'offline') {
+    errorLabel =
+      'Looks like your device is offline. Please, try to refresh the page.'
+  }
+  if (error === 'IE') {
+    errorLabel = "This bot isn't compatible with Internet Explorer."
+  }
+  return (
+    <div
+      style={{
+        height: '100vh',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: 'column',
+      }}
+    >
+      {error === '500' && (
+        <h1 style={{ fontWeight: 'bold', fontSize: '30px' }}>500</h1>
+      )}
+      <h2>{errorLabel}</h2>
+    </div>
+  )
+}

apps/viewer/layouts/NotFoundPage.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+export const NotFoundPage = () => (
+  <div
+    style={{
+      height: '100vh',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      flexDirection: 'column',
+    }}
+  >
+    <h1 style={{ fontWeight: 'bold', fontSize: '30px' }}>404</h1>
+    <h2>The bot you&apos;re looking for doesn&apos;t exist</h2>
+  </div>
+)

apps/viewer/layouts/TypebotPage.tsx

@@ -0,0 +1,26 @@
+import { PublicTypebot, TypebotViewer } from 'bot-engine'
+import React from 'react'
+import { SEO } from '../components/Seo'
+import { ErrorPage } from './ErrorPage'
+import { NotFoundPage } from './NotFoundPage'
+
+export type TypebotPageProps = {
+  typebot?: PublicTypebot
+  url: string
+  isIE: boolean
+}
+
+export const TypebotPage = ({ typebot, isIE, url }: TypebotPageProps) => {
+  if (!typebot) {
+    return <NotFoundPage />
+  }
+  if (isIE) {
+    return <ErrorPage error={'IE'} />
+  }
+  return (
+    <div style={{ height: '100vh' }}>
+      <SEO url={url} chatbotName={typebot.name} />
+      <TypebotViewer typebot={typebot} />
+    </div>
+  )
+}