refactor: migrate out of getLayout pattern

src/layouts/dashbard-layout.tsx

@@ -1,15 +1,13 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 
 import * as React from 'react';
-
 import { DashboardHeader, DashboardRoot } from '~/components/dashboard';
-import { LayoutType } from '.';
 
-export const DashboardLayout: LayoutType = page => {
+export function DashboardLayout({ children }: React.PropsWithChildren) {
   return (
     <DashboardRoot>
       <DashboardHeader />
-      {page}
+      {children}
     </DashboardRoot>
   );
-};
+}

src/layouts/overlay-layout.tsx

@@ -1,12 +1,11 @@
 import * as React from 'react';
 import { GoogleFontsPrefetch } from '~/modules/webfonts/google-fonts-prefetch';
-import { LayoutType } from '.';
 
-export const OverlayLayout: LayoutType = page => {
+export function OverlayLayout({ children }: React.PropsWithChildren) {
   return (
     <>
       <GoogleFontsPrefetch />
-      <div className="flex flex-col w-full h-screen bg-transparent overflow-hidden">{page}</div>
+      <div className="flex flex-col w-full h-screen bg-transparent overflow-hidden">{children}</div>
     </>
   );
-};
+}

src/pages/blocks/bottom-bar.tsx

@@ -1,13 +1,11 @@
-import { NextPage } from 'next';
 import * as React from 'react';
 import { OverlayLayout } from '~/layouts/overlay-layout';
-import { createNextPage } from '~/lib/create-next-page';
 import { BottomBar } from '~/modules/bottom-bar';
 
-const BottomBarPage: NextPage = () => {
-  return <BottomBar />;
-};
-
-export default createNextPage(BottomBarPage, {
-  layout: OverlayLayout,
-});
+export default function BottomBarPage() {
+  return (
+    <OverlayLayout>
+      <BottomBar />
+    </OverlayLayout>
+  );
+}

src/pages/blocks/capture-guard.tsx

@@ -1,18 +1,14 @@
 import * as React from 'react';
-import { NextPage } from 'next';
-import { createNextPage } from '~/lib/create-next-page';
 import { OverlayLayout } from '~/layouts/overlay-layout';
 
-const CaptureGuardBlock: NextPage = () => {
+export default function CaptureGuardBlock() {
   return (
-    <div className="flex flex-auto items-center justify-center bg-chungking-black border-4 border-chungking-green-500">
-      <span className="inline-block max-w-[480px] text-4xl text-chungking-white font-semibold">
-        if you&apos;re reading this then something bad happened
-      </span>
-    </div>
+    <OverlayLayout>
+      <div className="flex flex-auto items-center justify-center bg-chungking-black border-4 border-chungking-green-500">
+        <span className="inline-block max-w-[480px] text-4xl text-chungking-white font-semibold">
+          if you&apos;re reading this then something bad happened
+        </span>
+      </div>
+    </OverlayLayout>
   );
-};
-
-export default createNextPage(CaptureGuardBlock, {
-  layout: OverlayLayout,
-});
+}

src/pages/blocks/countdown-timer.tsx

@@ -2,11 +2,10 @@ import { useRouter } from 'next/router';
 import * as React from 'react';
 import Countdown from 'react-countdown';
 import { OverlayLayout } from '~/layouts/overlay-layout';
-import { createNextPage } from '~/lib/create-next-page';
 import { useOnMount } from '~/lib/hooks/use-on-mount';
 import { parseNumber } from '~/lib/query-parser';
 
-function CountdownTimerPage() {
+export default function CountdownTimerPage() {
   const router = useRouter();
   const [isCountdownRendered, setIsCountdownRendered] = React.useState(false);
 
@@ -20,23 +19,21 @@ function CountdownTimerPage() {
   );
 
   return (
-    <div>
-      {isCountdownRendered ? (
-        <Countdown
-          date={Date.now() + minutes}
-          precision={3}
-          renderer={props => (
-            <p className="block text-4xl font-bold text-white">
-              {props.minutes.toString().padStart(2, '0')}:
-              {props.seconds.toString().padStart(2, '0')}
-            </p>
-          )}
-        />
-      ) : null}
-    </div>
+    <OverlayLayout>
+      <div>
+        {isCountdownRendered ? (
+          <Countdown
+            date={Date.now() + minutes}
+            precision={3}
+            renderer={props => (
+              <p className="block text-4xl font-bold text-white">
+                {props.minutes.toString().padStart(2, '0')}:
+                {props.seconds.toString().padStart(2, '0')}
+              </p>
+            )}
+          />
+        ) : null}
+      </div>
+    </OverlayLayout>
   );
 }
-
-export default createNextPage(CountdownTimerPage, {
-  layout: OverlayLayout,
-});

src/pages/blocks/flightsim-pip.tsx

@@ -1,14 +1,10 @@
 import * as React from 'react';
-import { NextPage } from 'next';
-import { createNextPage } from '~/lib/create-next-page';
 import { OverlayLayout } from '~/layouts/overlay-layout';
 
-const FlightsimPIPPage: NextPage = () => {
+export default function FlightsimPIPPage() {
   return (
-    <div className="flex-auto h-full max-h-[376px] bg-chungking-blue-500 bg-opacity-25 border-t-4 border-chungking-blue-500" />
+    <OverlayLayout>
+      <div className="flex-auto h-full max-h-[376px] bg-chungking-blue-500 bg-opacity-25 border-t-4 border-chungking-blue-500" />
+    </OverlayLayout>
   );
-};
-
-export default createNextPage(FlightsimPIPPage, {
-  layout: OverlayLayout,
-});
+}

src/pages/blocks/flylive.tsx

@@ -1,13 +1,11 @@
 import * as React from 'react';
-import { NextPage } from 'next';
 import { FlyLiveStats } from '~/modules/flightsim/flylive-stats';
-import { createNextPage } from '~/lib/create-next-page';
 import { OverlayLayout } from '~/layouts/overlay-layout';
 
-const FlyLiveOverlayPage: NextPage = () => {
-  return <FlyLiveStats />;
-};
-
-export default createNextPage(FlyLiveOverlayPage, {
-  layout: OverlayLayout,
-});
+export default function FlyLiveOverlayPage() {
+  return (
+    <OverlayLayout>
+      <FlyLiveStats />
+    </OverlayLayout>
+  );
+}

src/pages/blocks/nye-clock.tsx

@@ -1,12 +1,11 @@
 import { useRouter } from 'next/router';
 import * as React from 'react';
 import { OverlayLayout } from '~/layouts/overlay-layout';
-import { createNextPage } from '~/lib/create-next-page';
 import { useOnMount } from '~/lib/hooks/use-on-mount';
 import { parseString } from '~/lib/query-parser';
 import { StudioClockInterface } from '~/modules/studio-clock/studio-clock-interface';
 
-function NYEClockPage() {
+export default function NYEClockPage() {
   const router = useRouter();
   const [isClockRendered, setIsClockRendered] = React.useState(false);
 
@@ -23,9 +22,9 @@ function NYEClockPage() {
     [router.query],
   );
 
-  return <div>{isClockRendered ? <StudioClockInterface {...clockProps} /> : null}</div>;
+  return (
+    <OverlayLayout>
+      <div>{isClockRendered ? <StudioClockInterface {...clockProps} /> : null}</div>
+    </OverlayLayout>
+  );
 }
-
-export default createNextPage(NYEClockPage, {
-  layout: OverlayLayout,
-});

src/pages/blocks/studio-clock-obs.tsx

@@ -1,27 +1,24 @@
 import * as React from 'react';
 import { OverlayLayout } from '~/layouts/overlay-layout';
-import { createNextPage } from '~/lib/create-next-page';
 import { useOnMount } from '~/lib/hooks/use-on-mount';
 import { StudioClockInterface } from '~/modules/studio-clock/studio-clock-interface';
 
-function StudioClockOBSSourcePage() {
+export default function StudioClockOBSSourcePage() {
   const [isClockRendered, setIsClockRendered] = React.useState(false);
 
   useOnMount(() => {
     setIsClockRendered(true);
   });
 
   return (
-    <div className="flex w-full h-screen items-center justify-center bg-chungking-black">
-      {isClockRendered ? (
-        <div className="scale-50">
-          <StudioClockInterface hideTimezone />
-        </div>
-      ) : null}
-    </div>
+    <OverlayLayout>
+      <div className="flex w-full h-screen items-center justify-center bg-chungking-black">
+        {isClockRendered ? (
+          <div className="scale-50">
+            <StudioClockInterface hideTimezone />
+          </div>
+        ) : null}
+      </div>
+    </OverlayLayout>
   );
 }
-
-export default createNextPage(StudioClockOBSSourcePage, {
-  layout: OverlayLayout,
-});

src/pages/blocks/studio-clock.tsx

@@ -1,12 +1,11 @@
 import { useRouter } from 'next/router';
 import * as React from 'react';
 import { OverlayLayout } from '~/layouts/overlay-layout';
-import { createNextPage } from '~/lib/create-next-page';
 import { useOnMount } from '~/lib/hooks/use-on-mount';
 import { parseString } from '~/lib/query-parser';
 import { StudioClockInterface } from '~/modules/studio-clock/studio-clock-interface';
 
-function StudioClockPage() {
+export default function StudioClockPage() {
   const router = useRouter();
   const [isClockRendered, setIsClockRendered] = React.useState(false);
 
@@ -23,9 +22,9 @@ function StudioClockPage() {
     [router.query],
   );
 
-  return <div>{isClockRendered ? <StudioClockInterface {...clockProps} /> : null}</div>;
+  return (
+    <OverlayLayout>
+      <div>{isClockRendered ? <StudioClockInterface {...clockProps} /> : null}</div>
+    </OverlayLayout>
+  );
 }
-
-export default createNextPage(StudioClockPage, {
-  layout: OverlayLayout,
-});

src/pages/blocks/time-signal-cerveza.tsx

@@ -1,17 +1,15 @@
-import { NextPage } from 'next';
 import dynamic from 'next/dynamic';
 import * as React from 'react';
 import { OverlayLayout } from '~/layouts/overlay-layout';
-import { createNextPage } from '~/lib/create-next-page';
 
 const TimeSignalWrapper = dynamic(() => import('~/modules/time-signal/time-signal-wrapper'), {
   ssr: false,
 });
 
-const TimeSignalPage: NextPage = () => {
-  return <TimeSignalWrapper cerveza />;
-};
-
-export default createNextPage(TimeSignalPage, {
-  layout: OverlayLayout,
-});
+export default function TimeSignalPage() {
+  return (
+    <OverlayLayout>
+      <TimeSignalWrapper cerveza />
+    </OverlayLayout>
+  );
+}

src/pages/blocks/time-signal.tsx

@@ -1,17 +1,15 @@
-import { NextPage } from 'next';
 import dynamic from 'next/dynamic';
 import * as React from 'react';
 import { OverlayLayout } from '~/layouts/overlay-layout';
-import { createNextPage } from '~/lib/create-next-page';
 
 const TimeSignalWrapper = dynamic(() => import('~/modules/time-signal/time-signal-wrapper'), {
   ssr: false,
 });
 
-const TimeSignalPage: NextPage = () => {
-  return <TimeSignalWrapper />;
-};
-
-export default createNextPage(TimeSignalPage, {
-  layout: OverlayLayout,
-});
+export default function TimeSignalPage() {
+  return (
+    <OverlayLayout>
+      <TimeSignalWrapper />
+    </OverlayLayout>
+  );
+}

src/pages/index.tsx

@@ -5,36 +5,33 @@ import { DashboardPageContent, DashboardPageHeader } from '~/components/dashboar
 import { DashboardSection, DashboardSectionHeader } from '~/components/dashboard/section';
 import { LinkList } from '~/components/link-list';
 import { DashboardLayout } from '~/layouts/dashbard-layout';
-import { createNextPage } from '~/lib/create-next-page';
 import { blocks, overlays, scenes } from '~/lib/data/dashboard';
 
-function IndexPage() {
+export default function IndexPage() {
   return (
-    <section className="flex h-[calc(100vh-60px)]">
-      <DashboardSidebar />
-      <div className="flex flex-col flex-auto">
-        <DashboardPageHeader title="Home" />
-        <DashboardPageContent>
-          <div className="space-y-8">
-            <DashboardSection>
-              <DashboardSectionHeader>Scenes</DashboardSectionHeader>
-              <LinkList items={scenes} />
-            </DashboardSection>
-            <DashboardSection>
-              <DashboardSectionHeader>Overlays</DashboardSectionHeader>
-              <LinkList items={overlays} />
-            </DashboardSection>
-            <DashboardSection>
-              <DashboardSectionHeader>Blocks</DashboardSectionHeader>
-              <LinkList items={blocks} />
-            </DashboardSection>
-          </div>
-        </DashboardPageContent>
-      </div>
-    </section>
+    <DashboardLayout>
+      <section className="flex h-[calc(100vh-60px)]">
+        <DashboardSidebar />
+        <div className="flex flex-col flex-auto">
+          <DashboardPageHeader title="Home" />
+          <DashboardPageContent>
+            <div className="space-y-8">
+              <DashboardSection>
+                <DashboardSectionHeader>Scenes</DashboardSectionHeader>
+                <LinkList items={scenes} />
+              </DashboardSection>
+              <DashboardSection>
+                <DashboardSectionHeader>Overlays</DashboardSectionHeader>
+                <LinkList items={overlays} />
+              </DashboardSection>
+              <DashboardSection>
+                <DashboardSectionHeader>Blocks</DashboardSectionHeader>
+                <LinkList items={blocks} />
+              </DashboardSection>
+            </div>
+          </DashboardPageContent>
+        </div>
+      </section>
+    </DashboardLayout>
   );
 }
-
-export default createNextPage(IndexPage, {
-  layout: DashboardLayout,
-});