Migrate extension Create page to Nextjs

frontend/src/app/create/Redirect.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+
+/** Check if the current page is running in an iframe, otherwise redirect home */
+const Redirect = () => {
+  const router = useRouter()
+
+  useEffect(() => {
+    if (window.self === window.top) {
+      router.replace('/')
+    }
+  }, [])
+
+  return null
+}
+
+export default Redirect

frontend/src/app/create/page.tsx

@@ -0,0 +1,29 @@
+import { Metadata } from 'next'
+
+import Content from '/src/components/Content/Content'
+import CreateForm from '/src/components/CreateForm/CreateForm'
+import Header from '/src/components/Header/Header'
+
+import Redirect from './Redirect'
+
+export const metadata: Metadata = {
+  title: 'Create a Crab Fit',
+}
+
+/**
+ * Used in the Crab Fit browser extension, to be rendered only in an iframe
+ */
+const Page = async () => <>
+  <Content isSlim>
+    {/* @ts-expect-error Async Server Component */}
+    <Header isFull isSmall />
+  </Content>
+
+  <Content isSlim>
+    <CreateForm noRedirect />
+  </Content>
+
+  <Redirect />
+</>
+
+export default Page

frontend/src/app/how-to/page.tsx

@@ -6,6 +6,7 @@ import { range, rotateArray } from '@giraugh/tools'
 import AvailabilityViewer from '/src/components/AvailabilityViewer/AvailabilityViewer'
 import Button from '/src/components/Button/Button'
 import Content from '/src/components/Content/Content'
+import Footer from '/src/components/Footer/Footer'
 import Header from '/src/components/Header/Header'
 import { P } from '/src/components/Paragraph/Text'
 import Section from '/src/components/Section/Section'
@@ -80,6 +81,9 @@ const Page = async () => {
         <Button href="/">{t('common:cta')}</Button>
       </Content>
     </Section>
+
+    {/* @ts-expect-error Async Server Component */}
+    <Footer />
   </>
 }
 

frontend/src/app/layout.tsx

@@ -1,7 +1,6 @@
 import { Metadata } from 'next'
 
 import Egg from '/src/components/Egg/Egg'
-import Footer from '/src/components/Footer/Footer'
 import Settings from '/src/components/Settings/Settings'
 import TranslateDialog from '/src/components/TranslateDialog/TranslateDialog'
 import { fallbackLng } from '/src/i18n/options'
@@ -40,9 +39,6 @@ const RootLayout = async ({ children }: { children: React.ReactNode }) => {
       <TranslateDialog />
 
       {children}
-
-      {/* @ts-expect-error Async Server Component */}
-      <Footer />
     </body>
   </html>
 }

frontend/src/app/page.tsx

@@ -4,6 +4,7 @@ import Link from 'next/link'
 import Content from '/src/components/Content/Content'
 import CreateForm from '/src/components/CreateForm/CreateForm'
 import DownloadButtons from '/src/components/DownloadButtons/DownloadButtons'
+import Footer from '/src/components/Footer/Footer'
 import Header from '/src/components/Header/Header'
 import { P } from '/src/components/Paragraph/Text'
 import Recents from '/src/components/Recents/Recents'
@@ -46,6 +47,9 @@ const Page = async () => {
         <P>{t('about.content.p5')}</P>
       </Content>
     </Section>
+
+    {/* @ts-expect-error Async Server Component */}
+    <Footer />
   </>
 }
 

frontend/src/app/privacy/page.tsx

@@ -3,6 +3,7 @@ import { Metadata } from 'next'
 import GoogleTranslate from '/src/app/privacy/GoogleTranslate'
 import Button from '/src/components/Button/Button'
 import Content from '/src/components/Content/Content'
+import Footer from '/src/components/Footer/Footer'
 import Header from '/src/components/Header/Header'
 import { P, Ul } from '/src/components/Paragraph/Text'
 import Section from '/src/components/Section/Section'
@@ -84,6 +85,9 @@ const Page = async () => {
         <Button href="/">{t('common:cta')}</Button>
       </Content>
     </Section>
+
+    {/* @ts-expect-error Async Server Component */}
+    <Footer />
   </>
 }